How to initialise the MatPaginator as a @ViewChild member variable?

Question

I'm coding in Visual Studio Code an Angular 8 project and just added some strict mode configuration:

"compilerOptions": {
  "strict": true,
  "noImplicitAny": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictPropertyInitialization": true,

Now, my paginator which was working fine, now is not even compiling.

I can instantiate the MatSort with:

@ViewChild(MatSort, { static: true }) sort: MatSort = new MatSort();

But I cannot do the same for the MatPaginator member variable:

@ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;

This forces me to add some checks in the code:

if (this.paginator) {

I read this blog article but I'm still searching for an alternative solution.

The paginator in the view:

<mat-paginator [pageIndex]="currentPageNumber" [length]="totalElements" [pageSize]="elementsPerPage" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="true"></mat-paginator>

It is not within an ngIf directive.

score 8 · Answer 1 · answered Jul 20 '20 at 03:12

When instantiate with new MatPaginator(), the error message says:

Expected 2-3 arguments, but got 0.ts(2554)

As MatPaginator has non optional arguments, you must initialize with the arguments. The first argument is a MapPaginatorIntl class; and the second is a ChangeDetectorRef abstract class, which is not possible to instantiate, but you can call ChangeDetectorRef.prototype to get rid of the error message, like this:.

@ViewChild(MatPaginator) paginator: MatPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);

ge_or_gi · Answer 2 · 2021-06-30T06:41:37.237

This will happen because of the STRICT mode enabled and if it is disabled then no issue there.

Тhis will be some of an answer but here is how the guys from angular have dealt with this issue, and for me, this is the way you should think about the stuff when using Strict mode. Just declare it also as UNDEFINED

paginator: MatPaginator | undefined;

and then wherever you are using it you will have to check for the existence of it.

if (this.paginator)

Since I had the same problem, I have checked in the GitHub repo for angular material schematics, see lin 44 and line 57 Link to file in github

score 2 · Answer 3 · answered May 25 '21 at 08:04

2

If you are certain that your paginator exists in your template you can use non-null assertion (exclamation mark)

@ViewChild(MatSort, { static: true }) sort!: MatSort;

You should NEVER EVER instantiate a component class yourself without using the proper tools (like CDK Portals for example). It's anti-pattern and you will loose the benefit of DI.

answered May 25 '21 at 08:04

Mickaël Boidin

134
3

Best answer to the question. But too tempting for non-decorated fields :) – tequilacat May 30 '21 at 21:19

score 2 · Answer 4 · answered Jun 09 '21 at 23:09

2

Check your MatPaginator is not in a *ngIf block.

Thanks to this answer!

answered Jun 09 '21 at 23:09

Eneko

1,709
1
16
25

score 1 · Answer 5 · answered Feb 05 '20 at 10:24

1

In the case of MatPaginator, you haven't instantiated, only declared there. For avoiding that check, you have to instantiate there as in MatSort expample if your requirement satisfies it.

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator = new MatPaginator();

answered Feb 05 '20 at 10:24

Jins Thomas Shaji

857
5
16

I forgot to mention that I tried instantiating it with the constructor, but it requires some arguments which I don't have and seem to be (_) private. – Stephane Feb 05 '20 at 10:25

How to initialise the MatPaginator as a @ViewChild member variable?

5 Answers5