Populating angular event from hild to parent

Question

I want to fire an event from parent and subscribe it from parent component.

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

@Component({
  selector: 'my-app',
  template: `
    <p>Hello</p>
    <parent [name]="settings.parentSettings.name" (subCreated)="onSubCreated()">
      <sub [name]="settings.subSettings.name"></sub>
    </parent>
  `
})
export class AppComponent  {
  name = 'Angular';
  settings:any ={
    parentSettings: {
      name: "P"
    },
    subSettings:{
      name: "S"
    }
  }
}


@Component({
  selector: 'parent',
  template: `<ng-container></ng-container>`
})
export class ParentComponent  {
  @Input() name: string;

  onSubCreated(){
    console.log("on sub created.");
  }
}



@Component({
  selector: 'sub',
  template: `<ng-container></ng-container>`
})
export class SubComponent implements OnInit {
  @Input() name: string;
  @Output() subCreated: EventEmitter<void> = new EventEmitter<void>();

  ngOnInit(){
    this.subCreated.emit();
  }
}

So, is there any way to fire onSubCreated() in ParentComponent? I do not want to move <sub [name]="settings.subSettings.name"></sub> in ParentComponent template.

Stackblitz working applcation is here.

Answer 1

Try this

 <parent [name]="settings.parentSettings.name" #parent>
      <sub [name]="settings.subSettings.name" (subCreated)="parent.onSubCreated()">
    </parent>

Hope it helps