Cannot read property '_intl' of undefined

Viewed 696

I use mat-paginator from Angular(Material) 12, which helps me implement the pagination feature. Besides pagination, I also would like to customize the label in the pagination from "Items per page" to "Foo per page"

enter image description here

My first implementation is following

export class MyComponent implements OnInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  ngOnInit() {
    this.paginator._intl.itemsPerPageLabel = 'Foo per page';
  }
}

This one does not work and it shows the error

ERROR TypeError: Cannot read property '_intl' of undefined

I made the second try with the following implementation

export class MyComponent implements OnInit {
  @ViewChild(MatPaginator, {static: true}) paginator!: MatPaginator;

  ngOnInit() {
    this.paginator._intl.itemsPerPageLabel = 'Foo per page';
  }
}

Then it works like a charm!

Why do I need to set {static: true} for @ViewChild to make it work?

0 Answers
Related