How to access child component from parent component in Angular?

Question

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;

Answer 1

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()
}

Answer 2

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