Angular - How to invoke function from parent to child component

Question

I have this situation: A parent component structured in this way:

 import { Component, OnInit } from '@angular/core';

 @Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
 })
 export class ParentComponent implements OnInit {

   constructor() { }

   ngOnInit() {
   }

 }

with this html (parent has an ng-content):

 <div>
  <ng-content></ng-content>
  <button>Click to say Hello!!!</button>
 </div>

and a child component like this:

 import { Component, OnInit } from "@angular/core";

 @Component({
   selector: "app-child",
   templateUrl: "./child.component.html",
   styleUrls: ["./child.component.css"]
 })
 export class ChildComponent implements OnInit {

  onSubmit() {
    alert("hello");
  }

  constructor() {}

  ngOnInit() {}
 }

with this html:

 <div>I'm child component</div>

From the parent component I want to click inside button to invoke onSubmit child function...is this possible?

<app-parent>
 <app-child>
 </app-child>
</app-parent>

This is a sample; I'm creating a modal that has default buttons: "CANCEL" and "SUCCESS". On the success button I need to invoke one function declared into the childrenComponent.

This is the stackblitz example: https://stackblitz.com/edit/angular-ivy-vuctg4

Answer 1

You can access like that

app.component.html

<hello name="{{ name }}"></hello>

<app-parent (clickActionCB)="clickActionCB($event)">
    <app-child></app-child>
</app-parent>

app.component.ts

import { Component, VERSION, ViewChild } from "@angular/core";
import { ChildComponent } from "./child/child.component";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  @ViewChild(ChildComponent) childRef: ChildComponent;
  clickActionCB(eventData) {
     this.childRef.onSubmit() ;
  }
}

parent.component.ts

import { Component, EventEmitter, OnInit, Output } from "@angular/core";

@Component({
  selector: "app-parent",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
  @Output() clickActionCB = new EventEmitter<string>();
  clickAction() {
    this.clickActionCB.emit();
  }
}

parent.component.html

<div>
    <ng-content></ng-content>
    <button (click)="clickAction()">Click to say Hello!!!</button>
</div>

Live stackblitz URL

Answer 2

child.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-child",
  template: `
    <div>I'm child component</div>
  `
})
export class ChildComponent implements OnInit {
  onSubmit() {
    alert("hello");
  }
  constructor() {}

  ngOnInit() {}
}

parent.component.ts

import { ChildComponent } from "../child/child.component";

@Component({
  selector: "app-parent",
  template: `
    <div>
      <ng-content></ng-content>
      <button (click)="onClick()">Click to say Hello!!!</button>
    </div>
  `
})
export class ParentComponent implements OnInit {
  @ContentChild(ChildComponent) childRef: ChildComponent;
  constructor() {}

  ngOnInit() {}

  onClick() {
    this.childRef.onSubmit();
  }
}

https://stackblitz.com/edit/angular-ivy-mteusj?file=src%2Fapp%2Fparent%2Fparent.component.ts