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);
    }
}
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments