Parent.html
<app-child #child></app-child>
<button (click)="child.callMethod()">Call</button>
Old answer
You can use @ViewChild by Parent like in example:
Parent
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() { }
@ViewChild(ChildComponent) private myChild: ChildComponent;
submit() {
this.myChild.callMethod();
}
}
Child:
import { Component } from '@angular/core';
@Component({
selector: 'child',
template: `<h3>Child component {{test}}</h3>`
})
export class ChildComponent {
test = 0;
callMethod() {
console.log('successfully executed.');
this.test++;
}
}
