javascript - Call a method of the child component

Question

I have a nested child component like this:

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

My appMain component needs to invoke a method on child-component.

How to invoke a method on the child-component?

Answer 1

You can get a reference to an element using

@ViewChild('childComponent') child;

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

@ViewChild(ComponentType) child;

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

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

See also get hold of an element in the template