using @viewChild in angular 8

Question

I have an application that use @ViewChild and below is the code I have

 @ViewChild('paginator', { read: MatPaginator, static: true}) public paginator: MatPaginator;

on the front I am using <mat-paginator [ngStyle]="{'display': orders.length > 0 ? 'flex': 'none' }" #paginator> and I have implemented AfterViewInit and this is the code I have just to check that the paginator has been initialised:

ngAfterViewInit(): void {
    console.log('tab group', this.paginator);
}

but the this.tabGroup is undefined and hence I can't set it's property. What am I doing wrong.

Thanks

Answer 1

Since Angular 8 ViewChild and ContentChild decorators must have a new option called static.

If you add static: true on a dynamic element (wrapped in a condition or a loop), then it will not be accessible in ngOnInit nor in ngAfterViewInit.

Setting it to static: false should behave as you're expecting it to.

Also, when updating to Angular 8, in the command line there will be a message explaining the new ViewChild and ContentChild changes, and a link this documentation page, and here's the pull request of the changes, with some explanations. This might help wrapping your head around the changes.