Angular material datatable updating

Question

I implemented Angular datatable from Angular Material.

I'm read data from my API and populate my table with it, using the following code:

@ViewChild('filter') filter: ElementRef;

  dataSource: MyDataSource | null;
  dataSubject = new BehaviorSubject<any[]>([]);
  displayedColumns = ['name'];

    constructor(private appService: ApplicationsService) {
    this.appService.getAllApps().subscribe({
      next: value => this.dataSubject.next(value)
    });
  }

  ngOnInit() {
    this.dataSource = new MyDataSource(this.dataSubject);
  }

export class MyDataSource extends DataSource<any[]> {

  constructor(private subject: BehaviorSubject<any[]>) {
    super ();
  }

  connect (): Observable<any[]> {
    return this.subject.asObservable();
  }

  disconnect (  ): void {

  }

}

And my template:

<md-table #table [dataSource]="dataSource">

          <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->

          <!-- name Column -->
          <ng-container mdColumnDef="name">
            <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
            <md-cell *mdCellDef="let row" (click)="viewApp(row)"> {{row.name}} </md-cell>
          </ng-container>

          <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
          <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
        </md-table>

I'm trying to update the table when user clicks a button this way:

buttonClick() {

    this.appService.geAnotherApps()
                .subscribe({
                next: value => this.dataSubject.next(value)
              });
}

but the table don't update.

1. Why the table is not updating?
2. How I can filter my table based on an input?

Answer 1

One solution is define a Action-Column in the HTML as follows:

<ng-container matColumnDef="actions">
        <mat-cell *matCellDef="let model">
          <button mat-icon-button matTooltip="Edit" (click)="edit(model)">
            <mat-icon>edit</mat-icon>
          </button>
        </mat-cell>
</ng-container>

If you pass the complete element to edit after to apply the edition you can see refresh the table automatically.

In the .ts you will have something like this:

private edit(element?: Model) {
    // In this case i use Mat-Dialog from edition
    let dialogRef = this.dialog.open(EditDialogComponent,
  {
    panelClass: 'mat-dialog-lg',
    data: { element: element }
  });
dialogRef.afterClosed().subscribe(response => {
  if (response) {
    // For change the data in the table list you have to assign the response to your element
    element = response;
  }
});

}

Keep in mind that element and response must be of the same type