Angular Template stuff

templatestuff.html

<ng-template #loginButtons>
  <button (click)="login()">{{loginText}}</button>
  <button (click)="signUp()">{{signUpText}}</button>
</ng-template>

<ng-template #logoText>
  <h3>Super Awsome Logo Text</h3>
</ng-template>

<ng-template #logo>
  logo
</ng-template>

<ng-template #mobileLogo>
  mobile logo
</ng-template>

<ng-template #userCredits let-credits="credits" let-cost="cost" let-buyFn="buy()" let-purchases="purchases">
  <span>You have {{credits}} available!</span>
  <span>If you want to purchase more it'll cost you {{cost}}</span>
  <button (click)="buyFn">Buy Credits</button>
  <ul>
    <li *ngFor="let p of purchases">{{p.name}}</li>
  </ul>
</ng-template>

<ng-template #coolTabs>
  <div>Click</div>
  <div>Click</div>
  <div>Click</div>
</ng-template>

<header>
  <ng-container [ngTemplateOutlet]="loginButtons"></ng-container>
  <ng-container [ngTemplateOutlet]="logo"></ng-container>
  <ng-container [ngTemplateOutlet]="logoText"></ng-container>
</header>
<hr>
<header>
  <button (click)="login()">{{loginText}}</button>
  <button (click)="signUp()">{{signUpText}}</button>
  <h3>Super Awsome Logo Text</h3>
</header>

<hr>
<h3>Custom Template</h3>

<app-header>
  <ng-container [ngTemplateOutlet]="loginButtons"></ng-container>
  <ng-container [ngTemplateOutlet]="logo"></ng-container>
  <ng-container [ngTemplateOutlet]="logoText"></ng-container>
</app-header>

<hr>
<h3>Template with context</h3>

<app-header>
  <ng-container *ngTemplateOutlet="userCredits;context:ctx"></ng-container>
</app-header>
<hr>
<h4>Pass template as input</h4>
<app-tabs [headerTemplate]="coolTabs"></app-tabs>