natmegs

<h1>Above the projected content</h1>
<ng-content></ng-content>
<p>Below the projected content</p>

natmegs

contextObj = {
  donut: "Old fashioned glazed"
};

natmegs

<ng-container *ngTemplateOutlet="template; context: contextObj">
</ng-container>

<ng-template #template let-food="donut">
	{{food}}
</ng-template>

natmegs

<ng-container *ngTemplateOutlet="template">
</ng-container>

<ng-template #template>
	Hello!
</ng-template>

natmegs

<ng-container>
  You can see me! (Without any help from structural directives)
</ng-container>

<table>
  <tbody>
    <ng-container *ngFor="let item of items">
      <tr *ngIf="item > 1">
        <td>{{item}}</td>
      </tr>

natmegs

<ng-template>
	You will never see me :(
</ng-template>

<ng-template *ngIf="showContents">
	You still won’t see me (even though I’m using a structural directive, there’s nothing that's telling Angular to use me)
</ng-template>

<ng-template *ngFor="let item of items">
	No dice (same reason as *ngIf above)

natmegs

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'host',
  templateUrl: './host.component.html',
  styleUrls: [ './host.component.css' ],
  entryComponents: [DynamicComponent]
})
export class AppComponent  {

natmegs

<label for="name">Enter Component Name</label>
<input type="text" id="name" [(ngModel)]="name" placeholder="Enter Dynamic Component Name">
<br />
<button (click)="addComponent()">Add Component</button>
<button *ngIf="hasDynamicComponents" (click)="removeComponent()">Remove Component</button>
<button *ngIf="hasDynamicComponents" (click)="clearComponents()">Clear All</button>
<ng-container #container></ng-container>

natmegs

import { Component } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
 selector: 'host',
 templateUrl: './host.component.html',
 styleUrls: [ './host.component.css' ],
 entryComponents: [DynamicComponent]
})
export class AppComponent  {

natmegs

<label for="name">Enter Component Name</label>
<input type="text" id="name" [(ngModel)]="name" placeholder="Enter Dynamic Component Name">
<br />
<button (click)="addComponent()">Add Component</button>
<ng-container #container></ng-container>