How to pass data to material table data source dynamically

I want to pass the dynamic data to material table. I show my code:

parent.component.html

<div class="overview"> <div class="vehicle-img"> <img src={{vehicleImg}} /> </div> <div class="board"> <div class="board-column company-overview"> <div class="board-column-header">{{ "COMPANY_OVERVIEW.TITLE" | translate}}</div> <div class="board-column-content"> <app-company-overview [companyOverviewData]="companyOverviewData"></app-company-overview> <div *ngIf="!companyOverviewData" class="loading"> <app-loading></app-loading> </div> </div> </div> <div class="board-column feeds"> <div class="board-column-header">{{ "FEEDS.TITLE" | translate}}</div> <div class="board-column-content"> <app-feeds [feedsOverviewData ]="feedsOverviewData "></app-feeds> <div *ngIf="!feedsData" class="loading"> <app-loading></app-loading> </div> </div> </div> </div> 

in this parent component, it will call a API to get feedsOverviewData

 this.feedsService.getFeedsByVin(this.vin).subscribe((data) => { this.feedsOverviewData = data; }); 

and this feedsOverviewData will be transport to app-feeds component, this component has also a child component feeds-list component,

<div class="feeds"> <mat-card class="feed-card"> <mat-card-title> <div class="title"> <h3>{{ 'FEEDS.SUBTITLE' | translate}} </h3> <hr> </div> </mat-card-title> <app-feed-list [feedsOverviewData]="feedsOverviewData"></app-feed-list> <div class="comment"> <textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea> <button mat-button [disabled]="!feedsComment"> <mat-icon class="send-button" matSuffix>send</mat-icon> </button> </div> </mat-card> </div> 

this feed-list component is implemented with angluar material table.

<table mat-table [dataSource]="dataSource"> <ng-container matColumnDef="feeds"> <td mat-cell *matCellDef="let item"> <mat-card-header> <div mat-card-avatar> <mat-icon class="avatar">insert_emoticon</mat-icon> </div> <mat-card-title class="feeds-header"><b> <!-- <div *ngIf="item.type === 'searchevent'"> <span>n-Level {{item.user}}</span> </div> --> <div *ngIf="item.comment === 'searchevent'"> <span>Event</span> </div> </b> </mat-card-title> <mat-card-subtitle class="feeds-date">{{item.timestamp | date: 'dd/MM/yyyy'}}</mat-card-subtitle> </mat-card-header> <mat-card-content> <div *ngIf="item.type !== 'searchevent'"> <div class="feeds-info">{{item.comment}}</div> </div> <div *ngIf="item.type === 'searchevent'"> <div class="feeds-info">FIN search executed by {{item.user}}.</div> </div> </mat-card-content> </td> </ng-container> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 

and feed-list.ts is just like this:

export class FeedListComponent implements OnInit { displayedColumns: string[] = ['feeds']; @Input() feedsOverviewData: Feeds[]; @ViewChild(MatPaginator) paginator: MatPaginator; dataSource = new MatTableDataSource<any>(); constructor() { } ngOnInit() { this.dataSource.paginator = this.paginator; this.dataSource.data = this.feedsOverviewData; } ngOnChange() { console.log(this.feedsOverviewData); this.dataSource.data = this.feedsOverviewData; } } 

I have tried many ways to pass this dynamica data to table, but it was not working.

do you have any ideas?

Best Regards,

Leo