title: How to catch a dynamic rendered component's output in Angular 8?
body: <p>I want to catch the output from the <code>ViewChild</code> rendered component. The ViewChild's conent shown after an <code>ngIf</code> fires.</p>
  
  <p>This is my template's code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf="isModalVisible" class="modal" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;!-- ... --&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;ng-template #dialogHost (saveModel)="setModel($event)"&gt;&lt;/ng-template&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the TypeScript file:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { ChangeDetectorRef, Component, ComponentFactoryResolver, Input, ViewChild, ViewContainerRef } from '@angular/core';
  import { DialogContentItem } from 'src/app/models/dialog/content/dialog-content-item';
  
  @Component({
    selector: 'app-dialog-preparator',
    templateUrl: './dialog-preparator.component.html',
    styleUrls: ['./dialog-preparator.component.css']
  })
  export class DialogPreparatorComponent {
    isModalVisible = false;
    @Input() dialogContent: DialogContentItem;
    @ViewChild('dialogHost', {static: false, read: ViewContainerRef}) dialogHost: ViewContainerRef;
  
    showModal() {
      this.isModalVisible = true;
      this.changeDetector.detectChanges();
      this.renderComponent();
    }
  
    renderComponent() {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.dialogContent.component);
  
      this.dialogHost.clear();
  
      const componentRef = this.dialogHost.createComponent(componentFactory);
      (componentRef.instance as DialogContentInterface).data = this.dialogContent.data;
    }
  
    setModel(model: any) {
      // I need to emit the model
    }
  }
  </code></pre>
  
  <p>Here is the ProcutCreateEditComponent:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-dialog-preparator [dialogContent]="userDialogContent"&gt;&lt;/app-dialog-preparator&gt;
  </code></pre>
  
  <p>The TypeScript code for this component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { UserCreateEditComponent } from 'src/app/components/user/user-create-edit.component';
  
  @Component({
    selector: 'app-product-create-edit',
    templateUrl: './product-create-edit.component.html',
    styleUrls: ['./product-create-edit.component.scss']
  })
  export class ProductCreateEditComponent {
    // this could be any other component in my software
    userDialogContent: DialogContentItem = new DialogContentItem(UserCreateEditComponent, {});
  
    constructor() {}
  
    // ...
  }
  </code></pre>
  
  <p>And here is the UserCreateEditComponent's TypeScript code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, Output } from '@angular/core';
  
  @Component({
    selector: 'app-user-create-edit',
    templateUrl: './user-create-edit.component.html',
    styleUrls: ['./user-create-edit.component.scss']
  })
  export class UserCreateEditComponent {
    @Output() saveModel: EventEmitter&lt;T&gt; = new EventEmitter();
    user = new User();
  
    constructor() {}
  
    save() {
      this.saveModel.emit(this.user);
    }
  }
  </code></pre>
  
  <p>So in the ProcutCreateEditComponent I create an instance of UserCreateEditComponent and pass this instance to the DialogPreparatorComponent. The DialogPreparatorComponent shows the UserCreateEditComponent in a dialog, and then I click on the save button (in the UserCreateEditComponent) there the <code>saveModel()</code> emitting to the DialogPreparatorComponent. I think... but instead of this I got this error message:</p>
  
  <pre><code>Event binding saveModel not emitted by any directive on an embedded template.
  Make sure that the event name is spelled correctly and all directives are
  listed in the "@NgModule.declarations". ("
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;ng-template #dialogHost [ERROR -&gt;](saveModel)="setModel($event)"&gt;&lt;/ng-template&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Actualy it is good, because the <code>ng-template</code> don't have <code>saveModel()</code> output.</p>
  
  <p>But how can I catch the UserCreateEditComponent's output in that point?</p>