ngtsc(2345) - Argument of type 'Event' is not assignable to parameter of type 'SortEvent'

Question

I'm new to angular. I've been trying to sort columns but I keep on getting this error:

Argument of type 'Event' is not assignable to parameter of type 'SortEvent'. Type 'Event' is missing the following properties from type 'SortEvent': column, direction - ngtsc(2345).

Any suggestions on how to make this work?

s-product-management.component.html:

<form>
        <div class="form-group form-inline">
        Full text search: <input class="form-control ml-2" type="text" name="searchTerm" [(ngModel)]="service.searchTerm"/>
        <span class="ml-3" *ngIf="service.loading$ | async">Loading...</span>
        </div>
                          
        <table class="table table-striped">
             <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
                   <th scope="col" sortable="area" (sort)="onSort($event)">Area</th>
                   <th scope="col" sortable="population" (sort)="onSort($event)">Population</th>
                 </tr>
              </thead>
              <tbody>
               <tr *ngFor="let product of products$ | async">
                <th scope="row">{{ product.id }}</th>
                 <td>
                  <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + product.flag" class="mr-2" style="width: 20px">
                  <ngb-highlight [result]="product.name" [term]="service.searchTerm"></ngb-highlight>
                  </td>
                  <td><ngb-highlight [result]="product.area | number" [term]="service.searchTerm"></ngb-highlight>
                  </td>
                  <td><ngb-highlight [result]="product.population | number" [term]="service.searchTerm"></ngb-highlight></td>
                 </tr>
                </tbody>
            </table>
                          
            <div class="d-flex justify-content-between p-2">
                <ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
                </ngb-pagination>
                          
                <select class="custom-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
                                <option [ngValue]="2">2 items per page</option>
                                <option [ngValue]="4">4 items per page</option>
                                <option [ngValue]="6">6 items per page</option>
                 </select>
</div>
                          
</form>

s-product-management.component.ts:

@Component(
    {selector: 'app-s-product-management', templateUrl: './s-product-management.component.html', providers: [ProductService, DecimalPipe]})

export class SProductManagementComponent {
  products$: Observable<Product[]>;
  total$: Observable<number>;

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor(public service: ProductService) {
    this.products$ = service.products$;
    this.total$ = service.total$;
    this.headers = new QueryList();
  }

  onSort({column, direction}: SortEvent) {
    // resetting other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });

    this.service.sortColumn = column;
    this.service.sortDirection = direction;
  }
}

sortable.directive.ts:

export type SortColumn = keyof Product | '';
export type SortDirection = 'asc' | 'desc' | '';
const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };

export interface SortEvent {
  column: SortColumn;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
  }
})
export class NgbdSortableHeader {

  @Input() sortable: SortColumn = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}

Answer 1

You need add NgbdSortableHeader into declarations for app.module.ts.

So that your NgbdSortableHeader directive is registered and will emit an event with SortEvent object via rotate().

import { NgbdSortableHeader } from './directives/sortable.directive';

@NgModule({
  ...
  declarations: [
    ...
    NgbdSortableHeader
  ]
})
export class AppModule {}

Sample Solution on StackBlitz

---

References

Angular Bootstrap Sortable Table Demo