3

I have mat-paginator in a child component a shown below:


child.component.html

<mat-paginator #paginator></mat-paginator>

I want to get this paginator from parent component using @ViewChild() as shown below:


parent.component.html

<child 
    <!-- code omitted for simplicity -->
>
</child>

***parent.component.ts*** 
@ViewChild('paginator') paginator: MatPaginator;

resetPaginator() {          
    this.paginator.firstPage();
}

But as this.paginator is undefined, I cannot access paginator in the child component. I am not sure how can I access the paginator from parent. One way maybe using the following approach, but if there is an elegant way I would prefer it. Any idea?

@ViewChild(ChildComponent) child: ChildComponent;
Jack
  • 1
  • 21
  • 118
  • 236
  • you should check it on AfterViewInit() life-cycle hook – yissachar shechter Jan 05 '21 at 08:08
  • But I already try to use it on reset method that is called after `AfterViewInit()`. So, I just need if there is an elegant way to access paginator in the child component using `@ViewChild(ChildComponent) child: ChildComponent;`? If not, I think I should use `@ViewChild(ChildComponent) child: ChildComponent;` to access the paginator and set its value. Any idea? – Jack Jan 05 '21 at 08:11
  • from the parent, you can access the child component using @ViewChild then you can access the paginator – Ibrahim Abu Lubbad Jan 05 '21 at 08:24

2 Answers2

6

Friedrick, parent only can access to "child" (but if can access to child, can acces to all the properties and function of the child). So in your child you declare

//in CHILD, so this variable can be access from parent
@ViewChild('paginator') paginator: MatPaginator;

In parent you has a

@ViewChild('child') child: ChildComponent;

And you get the "paginator of the child" as usually

this.child.paginator.firstPage();

Note, you can also add a template reference to the child and avoid declare the viewChild

<child-component #child..></child-component>
<button (click)="child.paginatorfirstPage()">first</button>
<button (click)="doSomething(child)">something</button>
doSomething(child:any)
{
    child.paginator.lastPage()
}
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Perfect! Thanks a lot. – Jack Jan 05 '21 at 13:07
  • I have a similar issue. I have a `mat-tab` and first open the tab contaimner and then open tabs. But, I pass the parameter while loading teh container first and then these route parameters are lost throught tabs. So, how can I keep these values and use them in tabs? As the data comes first to the container that is parent, I could not use `@ViewChild` approach I think. So, what should I use in this? – Jack Jan 05 '21 at 13:10
1

Static query migration guide ​Important note for library authors: This migration is especially crucial for library authors to facilitate their users upgrading to version 9 when it becomes available.

In version 9, the default setting for @ViewChild and @ContentChild queries is changing in order to fix buggy and surprising behavior in queries (read more about that here).

In preparation for this change, in version 8, we are migrating all applications and libraries to explicitly specify the resolution strategy for @ViewChild and @ContentChild queries.

Specifically, this migration adds an explicit "static" flag that dictates when that query's results should be assigned. Adding this flag will ensure your code works the same way when upgrading to version 9.

Before:

// query results sometimes available in `ngOnInit`, sometimes in `ngAfterViewInit` (based on template)
@ViewChild('foo') foo: ElementRef;

After:

// query results available in ngOnInit
@ViewChild('foo', {static: true}) foo: ElementRef;

OR

// query results available in ngAfterViewInit
@ViewChild('foo', {static: false}) foo: ElementRef;

Starting with version 9, the static flag will default to false. At that time, any {static: false} flags can be safely removed, and we will have a schematic that will update your code for you.

Note: this flag only applies to @ViewChild and @ContentChild queries specifically, as @ViewChildren and @ContentChildren queries do not have a concept of static and dynamic (they are always resolved as if they are "dynamic").

Static query migration guide

Masoud Bimmar
  • 6,941
  • 4
  • 30
  • 33