How do I call ngAfterViewInit() if specific condition is met

Issue

Here is the reference code URL

so I have using the above code in my component.... but in my comonent table is inside ngcontainer which gets visible once some flag(e.g. visibleTabulardata) is set to true

<ng-container *ngIf='visibleTabulardata'> <!-- this gets visible after some specific condition
inside this table and mat-paginator code is used from the above URL
</ng-container>

Now they have used below code to initialize data across pages

 @ViewChild('paginator') paginator: MatPaginator;
  @ViewChild('paginatorPageSize') paginatorPageSize: MatPaginator;

  pageSizes = [3, 5, 7];

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSourceWithPageSize.paginator = this.paginatorPageSize;
  }

So and in my ts file one method is there which sets visibleTabulardata as true

enableTableData(){
this.visibleTabulardata =true;
}

I tried calling ngAfterViewInit() nside enableTableData() but it is not working

Solution

By adding

<div  [hidden]="visibleTabulardata"> 

Based on a button click you hide/show the tabel and pagination.

https://stackblitz.com/edit/angular-mat-table-pagination-example-yhyftk?file=src%2Fapp%2Fsimple-mat-table%2Fsimple-mat-table.component.ts,src%2Fapp%2Fsimple-mat-table%2Fsimple-mat-table.component.html&file=src%2Fapp%2Fsimple-mat-table%2Fsimple-mat-table.component.html

Answered By - Stefani Totokotsopoulou