In bellow example how to call child component furcation callme()
from parent component.
parent.component.html
Bellow code When you click the click me button, it calls the child component function callMe().
<button (click)="callMyChild()">Click Me</button> <app-child></app-child>
parent.component.ts
@Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.scss'] }) export class ParentComponent implements OnInit { @ViewChild(ChildComponent, {static : true}) child : ChildComponent; callMyChild(){ child.callMe('Calling from the parent!'); } }
child.component.ts
@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { callMe(value : string) { console.log('Called : ' + value); } }