title: pass Dynamic Html element based on options from parent to child component in Angular?
body: <p>I want to pass html element from parent to child based on conditions like
    <strong>If user click button in parent child should display button</strong> or 
    <strong>If user select chckbox then child should display checkbox</strong> This is my scenario</p>
  
  <p>To solve this I am using <strong>ngTemplateOutlet</strong>,  <strong>ngContent</strong> through content projection concepts in angular. </p>
  
  <p>I am getting error in console <strong>ERROR
  Error: templateRef.createEmbeddedView is not a function</strong></p>
  
  <p>I tried like this</p>
  
  <pre><code>  &lt;button (click)="getType('button')"&gt;Display button in child&lt;/button&gt;
    &lt;div&gt;
    &lt;label&gt;checkbox&lt;/label&gt;
    &lt;input type="checkbox" (change)="getType('checkbox')"&gt;
    &lt;/div&gt;
    &lt;app-child&gt;
  
    &lt;ng-container [ngTemplateOutlet]="dynamicElement"&gt;&lt;/ng-container&gt;
  
          &lt;ng-template #tp2&gt;
          &lt;button&gt;Hey I am button passed dynamically from parent&lt;/button&gt;
          &lt;/ng-template&gt;
  
            &lt;ng-template #tp3&gt;
          &lt;label&gt;I am checkbox passed from parent&lt;/label&gt;
         &lt;input type="checkbox" (change)="getType('checkbox')"&gt;
          &lt;/ng-template&gt;
  </code></pre>
  
  <p>Please find link I work out <a href="https://stackblitz.com/edit/angular-yzzsgs-dnfgaq?file=src/app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-yzzsgs-dnfgaq?file=src/app/app.component.ts</a></p>
  
  <p>Is there any other way?</p>
  
  <p>Any help will appreciable</p>
  
  <p>Thanks in advance</p>