wp-ngDoCheck-05.ts

import { Component, Input, IterableDiffer, IterableDiffers, OnInit, DoCheck, IterableChanges } from '@angular/core';

@Component({
  selector: 'data-table',
  templateUrl: './data-table.component.html'
})
export class DataTableComponent implements OnInit, DoCheck {
  @Input()
  public data: number[] = [];

  public sorted: number[] = [];

  private _diff: IterableDiffer<number>;

  constructor(private _iterableDiffers: IterableDiffers) { }

  public ngOnInit(): void {
    this._diff = this._iterableDiffers.find(this.data).create();

    this._sort();
  }

  public ngDoCheck(): void {
    const changes: IterableChanges<number> = this._diff.diff(this.data);

    if (changes) {
      this._sort();
    }
  }

  private _sort(): void {
    this.sorted = this.data.sort((item1: number, item2: number) => item1 - item2);
  }
}