[Angular] Learn Angular Multi-Slot Content Projection

Now for au-modal component, we pass in tow component though contenct projection:

  <au-modal
    class="auth-modal"
    #modal
    *auModalOpenOnClick="[loginButton, signUpButton]"
    [closeOnClickOutside]="true"
    [closeOnEsc]="true">
    <i class="fa fa-times" (click)="modal.close()"></i>
    <au-tab-panel>
       <!-- modal body-->
    </au-tab-panel>
  </au-modal> 

One is 'au-tab-panel' which contains all the content body for modal. Another is 'i' tag, repersent a close icon.

Now both are passed in though content projection, so au-modal component, we need to know how to project two components into correct places.

au-modal component:

<div class="modal-overlay" (click)="onClick()">

  <div class="modal-body" (click)="cancelCloseModal($event)">

    <div class="close-icon">
      <ng-content select="i"></ng-content>
    </div>

    <ng-container *ngIf="body; else projectionBody">
      <ng-container *ngTemplateOutlet="body"></ng-container>
    </ng-container>

    <ng-template #projectionBody>
      <ng-content></ng-content>
    </ng-template>

  </div>

</div>

Here using 'select' attr for ng-content, it will take the projection body with the correct selector. In this case, is 'i' tag.

The rest content which don't have any selector will goes into:

    <ng-template #projectionBody>
      <ng-content></ng-content>
    </ng-template>

And this ng-template won't shows up until:

*ngIf="body; else projectionBody"