Country table.component.ts
@Component({
selector: 'app-country-table',
templateUrl: './country-table.component.html',
standalone: true,
imports: [ FormsModule, AsyncPipe, NgbHighlight, NgbdSortableHeader, NgbPaginationModule, NgIf, NgFor],
})
export class CountryTableComponent implements OnInit {
countries$!: Observable<Country[]>;
total$!: Observable<number>;
@ViewChildren(NgbdSortableHeader) headers!: QueryList<NgbdSortableHeader>;
@Input() apiResults!: Country[];
public tableHelper!: CountryTableFilter;
constructor() {}
ngOnInit(): void {
console.log(`part table initialize with results ${this.apiResults}`);
this.tableHelper = new CountryTableFilter(this.apiResults);
this.countries$ = this.tableHelper.displayedResults$;
this.total$ = this.tableHelper.total$;
}
onSort({ column, direction }: SortEvent) {
// resetting other headers
this.headers.forEach((header) => {
if (header.sortable !== column) {
header.direction = '';
}
});
this.tableHelper!.sortColumn = column.toString();
this.tableHelper!.sortDirection = direction;
}
identify(index: number, item: Country) {
return item.name.official;
}
}