Country table.component.ts

Inputs changed to setters to explicitly invoke dynamic updates

export class CountryTableComponent implements OnInit {
  countries$!: Observable<Country[]>;
  total$!: Observable<number>;

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

  @Input() set apiResults(value: Country[]) {
    if (this.tableHelper) {
      console.log('setting value to tableHelper');
      this.tableHelper.updateValues(value);
    }
  }
  @Input() set loading(loading: boolean) {
    if (this.tableHelper) {
      this.tableHelper.loading = loading;
    }
  }

  public tableHelper!: CountryTableFilter;

  constructor() {}

  ngOnInit(): void {
    this.tableHelper = new CountryTableFilter([]);

    this.countries$ = this.tableHelper.displayedResults$;
    this.total$ = this.tableHelper.total$;
  }


  ngOnChanges(changes: SimpleChanges) {
    if (this.tableHelper && changes['apiResults']) {
      console.log('apiResults changed to:', changes['apiResults'].currentValue);
    }
  }

  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;
  }
}