Angular : how to call parent component function from child component

you need to know, how component interact with each other in Angular

passing from parent to child

it very basic concept, but if you’r new to angular, it’s might take you sometime to understand this concept.let’s understand this through coding example. I have created a demo for this here.

Step 1: create a parent component using this command

ng g c parent-component

Step 2 : create a child component using this command

ng g c child-component

Step 3: we need to call child component from parent component, use child component selector, in our case selector is ‘app-child-component’. use below code to call child component from parent component.

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

Step 4: create function in parent component, like i have created below.

parentFun(){alert(“parent component function.”);}

Note: “to call this function from child component, we have to pass this function from parent component to child component. than we have to receive this function in our child component. and later on we can call this function from child component.”

Step 5: let pass this function from parent component to child component. we have to edit our third step code little, like this.

<app-child-component (parentFun)=”parentFun()” ></app-child-component>

Step 6: Receive this function in child component.

@Output(“parentFun”) parentFun: EventEmitter<any> = new EventEmitter();

Step 7: Now we can call parent component function from child component, using this code.

this.parentFun.emit();