How to call the method in the different component

Question

How to call a method in the different component using ViewChild ?

I have created a method in the piechart component and tried to access that method from the app component usinf ViewChild.

This is my piechart.component.ts

export class PiechartComponent {
  constructor() { }
  pie(){
console.log("Hello World")
}
}

This is my app.component.ts

export class AppComponent {
 @ViewChild(PiechartComponent) piechart:PiechartComponent;
 constructor(){ }
 pieChart(){ 
 this.piechart.pie();
}
}

This is my app.component.html

<button (click)="pieChart()">Pie Chart</button>

When I click a button I should get output as "Hello world". But I am getting following error. "TypeError: Cannot read property 'pie' of undefined"

Answer 1

You need to add the child component inside the parent component template

<pie-chart ></pie-chart>
<button (click)="pieChart()">Pie Chart</button>

Demo