Capturing events emitted from components inside <ng-content>? Capturing events emitted from components inside <ng-content>? angular angular

Capturing events emitted from components inside <ng-content>?


You could get an instance of the login modal with @ContentChild() and manually subscribe to the open event

@Component({    selector: 'modal-container',    template: `    <div [class]="css">      <div [attr.id]="id" class="reveal" (open)="openModal()">        <ng-content></ng-content>      </div>    </div>  `})export class ModalContainerComponent {    @ContentChild(LoginModalComponent)    loginModal: LoginModalComponent;    ngAfterViewInit() {        this.loginModal.open.subscribe((event) => {            //Handel event here        });    }}


I ended up abandoning the event-driven approach and went with a shared service class instead.


Just to expand on rob'a answer and comment

@ContentChild(LoginModalComponent) private models: QueryList<LoginModalComponent>;ngAfterViewInit() {    let models = this.models.toArray();    for (let key in panels) {        let model = models[key];        panel.open.subscribe(()=>{            // do things        });    }}

This works in my case, and included for completeness.