How to call child component method or function in Parent Component

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);
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *