Angular Child Component Table

I have 2 component which is Component A and B , in component A I called a child component which is Component B which is a table the app-team-management selector(child component). I

Solution 1:

Mat tab usually preloads all components, meaning your ngOnInit should be triggered way before you click on second tab. it could mean that it's trying to get data which doesn't yet exist. I would first try to lazy load your child component by adding ng-template, that should fix onInit runing when you click on tab.

<mat-tablabel="Teams"><divclass="mat-tab-shadow-container"><divclass="mat-tab-shadow"></div><divclass="tab-content"><ng-template><app-team-management [resetFormSubject]="resetFormSubject"></app-team-management></ng-template></div></div></mat-tab>

Second, I would put this code

this.teamTable.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);
this.teamTable.nextObservable.subscribe(() => { this._tableEvent(); });
this.teamTable.sortObservable.subscribe(() => { this._tableEvent(); });
this.teamTable.previousObservable.subscribe(() => { this._tableEvent(); });
this.teamTable.sizeObservable.subscribe(() => { this._tableEvent(); });

into AfterViewInit, since it depends on ViewChild, or put setter in ViewChild to trigger when html loads.

Solution 2:

Please try to understand the angular life cycle fellow, after reviewing you're code, I analyzed that you depending on execution of ngOnInit() method, but unfortunately it's not happen right? this is because of Angular Life Cycle fellow, the method ngOnInit() is just executed once when component is loaded,

So in your case, you need to implement another angular life cycle method which is OnChanges, Once you implement with your component, It will force you to override it's ngOnChange(change: SimpleChanges) method, like Below

Whenever you switch the tab, this ngOnChanges(changes: SimpleChanges) method will execute, for that you need to pass the data to child component.

It Seems you are not passing data to child component! may be you have global data or you are fetching data from api within child component, not sure!

Can you please let me know, how did you getting the data for child component?