1. ngTemplateOutlet

Insert a common template in various sections of a view that are not generated by a loop or subject to a condition. For example, you can define a template for the logo of a company and insert it in several places in the page:

<div>
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
  <h1>Company History</h1>
  <div>{{companyHistory}}</div>
</div>

<form (ngSubmit)="onSubmit()">
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
  <h1>User info</h1>
  <label>Name:</label><input type="text" [(ngModel)]="userName" />
  <label>Account ID:</label><input type="text" [(ngModel)]="accountId" />
  <button>Submit</button>
</form>
<div class="footer">
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
</div>

<ng-template #companyLogoTemplate>
  <div class="companyLogo">
    <img [src]="logoSourceUrl">
    <label>The ACME company, {{employeeCount}} people working for you!</label>
  </div>
</ng-template>

1.1. Configurable Components with Template Partial @Inputs

// parent
@Component({
  selector: 'app-root',
  template: `
    <ng-template #customTabButtons>
      <div class="custom-class">
        <button class="tab-button" (click)="login()">
          {{loginText}}
        </button>
        <button class="tab-button" (click)="signUp()">
          {{signUpText}}
        </button>
      </div>
    </ng-template>

    <tab-container [headerTemplate]="customTabButtons"></tab-container>
  `,
})
export class AppComponent implements OnInit {}

// child
@Component({
  selector: 'tab-container',
  template: `
    <ng-template #defaultTabButtons>
      <div class="default-tab-buttons">
        ...
      </div>
    </ng-template>

    <ng-container *ngTemplateOutlet="headerTemplate || defaultTabButtons"></ng-container>

    ... rest of tab container component ...
  `,
})
export class TabContainerComponent {
  @Input() headerTemplate: TemplateRef<any>; // Custom template provided by parent
}

1.2. Template Context

@Component({
  selector: 'app-root',
  template: `
    <ng-template #estimateTemplate let-lessonsCounter="estimate">
        <div> Approximately {{lessonsCounter}} lessons ...</div>
    </ng-template>

    <ng-container
      *ngTemplateOutlet="estimateTemplate;context:ctx">
    </ng-container>
    `,
})
export class AppComponent {
  totalEstimate = 10;
  ctx = { estimate: this.totalEstimate };
}

1.3. Template References

@Component({
  selector: 'app-root',
  template: `
      <ng-template #defaultTabButtons>
          <button class="tab-button" (click)="login()">
            {{loginText}}
          </button>
          <button class="tab-button" (click)="signUp()">
            {{signUpText}}
          </button>
      </ng-template>
`,
})
export class AppComponent implements OnInit {
  @ViewChild('defaultTabButtons') private defaultTabButtonsTpl: TemplateRef<any>;

  ngOnInit() {
    console.log(this.defaultTabButtonsTpl);
  }
}