ng-content inside ng-template appears only in one ng-container

I'm creating a flip panel. The panel is composed in three parts.

• panel-tool-bar
• panel-front
• panel-back

The tool-bar has a fix part, the flip button.

In my flip-panel.component I have a ng-template for the tool-bar because the tool bar should be shown at both sides and should be the same. But I'm using also ng-content in this template to fetch the user defined items for the tool-bar.

My flip-panel.component:

<div class="flip-panel">

  <div class="front-container">
    <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
    <ng-content select="panel-front"></ng-content>
  </div>

  <div class="back-container">
    <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
    <ng-content select="panel-back"></ng-content>
  </div>

</div>

<!-- template used in both container front and back -->
<ng-template #headerTemplate>
  <div class="flip-panel-header">
    <span>
      <ng-content select="panel-tool-bar"></ng-content>
    </span>
    <span class="flip-button" aria-hidden="true" (click)="toggle()">[Flip]</span>
  </div>
</ng-template>

The Problem I have is, that the user defined items in the tool-bar (selected content from panel-tool-bar) is shown only on the back content.

Here is a full example: https://stackblitz.com/edit/angular-fsnww2?file=src%2Fapp%2Fapp.component.html

you can use content projection only once and you are trying to load the header in both via ng-content. Make sure, for example with *ngIf, content is only projected once.

Code for working example:

<div class="flip-panel">
  <div class="front-container">
    <ng-container *ngIf="flipped" [ngTemplateOutlet]="headerTemplate"></ng-container>
    <ng-content select="panel-front"></ng-content>
  </div>

  <div class="back-container">
    <ng-container *ngIf="!flipped" [ngTemplateOutlet]="headerTemplate"></ng-container>
    <ng-content select="panel-back"></ng-content>
  </div>
</div>