Call a method of a child component

Question

I have a nested child component like this:

<app-main> <child-component /> </app-main> 

My appMain component must call the method of the child component.

How to call a method for a child component?

Answer 1

You can get a link to an item using

 @ViewChild('childComponent') child; 

where childComponent is the template variable <some-elem #childComponent > `or

 @ViewChild(ComponentType) child; 

where ComponentType is the type of the component or directive, and then in the ngAfterViewInit or event handlers call child.someFunc() .

 ngAfterViewInit() { console.log(this.child); } 

See also get item in template.

Answer 2

Parent and child can communicate through data binding.

Example:

 @Component({ selector: 'child-component', inputs: ['bar'], template: `"{{ bar }}" in child, counter {{ n }}` }) class ChildComponent{ constructor () { this.n = 0; } inc () { this.n++; } } @Component({ selector: 'my-app', template: ` <child-component #f [bar]="bar"></child-component><br> <button (click)="f.inc()">call child func</button> <button (click)="bar = 'different'">change parent var</button> `, directives: [ChildComponent] }) class AppComponent { constructor () { this.bar = 'parent var'; } } bootstrap(AppComponent); 

Demo

#f creates a link to a child component and can be used in a template or passed to a function. Data from the parent can be passed in by binding [ ] .

Answer 3

Being a component of a son

 @Component({ // configuration template: `{{data}}`, // more configuration }) export class Son { data: number = 3; constructor() { } updateData(data:number) { this.data = data; } } 

The presence of the father component

 @Component({ // configuration }) export class Parent { @ViewChild(Son) mySon: Son; incrementSonBy5() { this.mySon.updateData(this.mySon.data + 5); } } 

In father's pattern

 <son></son> <button (click)="incrementSonBy5()">Increment son by 5</button> 

This solution only works for one instance of <son></son> in the parent template. If you have multiple instances, they will only work in the first template.

Answer 4

The best way to access the child component is @ViewChild .

Say you have an AppMainComponent with a nested ChildComponent from your example.

 // app-main.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-main', template: ` <child-component /> ` }) export class AppMainComponent {} 

You want to call a clear method from your ChildComponent.

 // child.component.ts import { Component } from '@angular/core'; @Component({ selector: 'child-component', template: '{{ greeting }}' }) class ChildComponent { greeting: String = 'Hello World!'; clear() { this.greeting = null; } } 

You can execute it by importing the ChildComponent class, the ViewChild decorator and the pass component class in it as a request. This way you will have access to the ChildComponent interface stored in the user variable. Here is an example:

 // app-main.component.ts import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from './components/child/child.component'; @Component({ selector: 'app-main', template: ` <child-component /> ` }) class ChildComponent { @ViewChild(ChildComponent) child: ChildComponent; clearChild() { this.child.clear(); } } 

Note! The view of the child becomes available only after ngAfterViewInit .

The answer after Angular initializes component views and child views. Called once after the first ngAfterContentChecked (). Component hook.

If you want to automatically execute a method, you need to do this inside this life cycle.

You can also get QueryList child components through ViewChildren .

 import { Component, ViewChildren, QueryList } from '@angular/core'; import { ChildComponent } from './components/child/child.component'; ... @ViewChildren(ChildComponent) children: QueryList<ChildComponent>; 

QueryList can be very useful, for example. You can subscribe to changes for children.

It is also possible to create reference template variables and access them through the ViewChild decoder.