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

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

• javascript
• typescript
• angular-material
• angular8

• You've shown us the code where this.paginator is declared. Where do you declare this.tabGroup? – Michael Beeson Commented Jul 11, 2019 at 12:11
• sorry was supposed to be this.paginator. it's a typo as I have two on the same page LOL. I ahve changed the code now – Jack M Commented Jul 11, 2019 at 12:16
• Does your template have any *ngIf in DOM elements around the paginator? – Reactgular Commented Jul 11, 2019 at 12:21
• it is straight after a DIV with an if so I have <div class="table-wrapper" *ngIf="orders?.length > 0"> gjhgjhgjhgjh</div> <mat-paginator [ngStyle]="{'display': orders.length > 0 ? 'flex': 'none' }" #paginator> – Jack M Commented Jul 11, 2019 at 12:27
• 3 Have you tried using { static: false } ? – heunetik Commented Jul 11, 2019 at 14:46

1 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 mand 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.