title: How do I conditionally wrap <ng-content> multiple times?
body: <p>I tried writing a wrapper component which can be passed some text and some parameters, which would then format my text using bootstrap, based on these parameters.</p>
  
  <p>I've tried this:</p>
  
  <p><strong>header-line.component.ts</strong></p>
  
  <pre><code>@Component({
    selector:'header-line',
    templateUrl: 'header-line.component.html'
  })
  export class HeaderLineComponent {
    @Input level: number;
    // other inputs used for formatting skipped here
  }
  </code></pre>
  
  <p><strong>header-line.component.html</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt; &lt;!-- would really be [className]="..." based on skipped inputs --&gt;
      &lt;header-wrapper [level]="level"&gt;
        &lt;!-- display of icon, based on skipped inputs --&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/header-wrapper&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>header-wrapper.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'header-wrapper',
    templateUrl: './header-wrapper.component.html'
  })
  export class HeaderWrapperComponent {
    @Input() level: number;
  }
  </code></pre>
  
  <p><strong>header-wrapper.component.html</strong></p>
  
  <pre><code>&lt;h1 *ngIf="level === 1"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/h1&gt;
  &lt;h2 *ngIf="level === 2"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/h2&gt;
  &lt;h3 *ngIf="level === 3"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/h3&gt;
  &lt;h4 *ngIf="level === 4"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/h4&gt;
  &lt;h5 *ngIf="level === 5"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/h5&gt;
  &lt;span *ngIf="!level || level &lt; 1 || level &gt; 5"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/span&gt;
  </code></pre>
  
  <p><strong>Intended usage</strong></p>
  
  <p>Usage would be something along the lines of:</p>
  
  <pre><code>&lt;header-line [level]="1" [...]="..."&gt;Just a test h1&lt;/header-line&gt;
  &lt;header-line [level]="2" [...]="..."&gt;Just a test h2&lt;/header-line&gt;
  &lt;header-line [level]="3" [...]="..."&gt;Just a test h3&lt;/header-line&gt;
  &lt;header-line [...]="..."&gt;Just a test span&lt;/header-line&gt;
  </code></pre>
  
  <p><strong>Expected output</strong></p>
  
  <p>I would then have expected the output to create something equivalent to:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="cols-sm-12"&gt;
      &lt;h1&gt;Just a test h1&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="cols-sm-12"&gt;
      &lt;h2&gt;Just a test h2&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="cols-sm-12"&gt;
      &lt;h3&gt;Just a test h3&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="cols-sm-12"&gt;
      &lt;span&gt;Just a test span&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Effective output</strong></p>
  
  <p>However, what I do get is the following:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="cols-sm-12"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="cols-sm-12"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="cols-sm-12"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="cols-sm-12"&gt;
      &lt;span&gt;Just a test span&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Problem analysis</strong></p>
  
  <p>It took me only a little while to find out that the cause of my problem is the repeated use of  in header-wrapper.component.ts because it is apparently static and cannot be used dynamically.</p>
  
  <p>The following two links explain why my expectations were disappointed:</p>
  
  <p><a href="https://github.com/angular/angular/issues/9173" rel="nofollow noreferrer">https://github.com/angular/angular/issues/9173</a></p>
  
  <p><a href="https://github.com/angular/angular/issues/8563" rel="nofollow noreferrer">https://github.com/angular/angular/issues/8563</a></p>
  
  <p><strong>Finding a solution</strong></p>
  
  <p>The following link on Stackoverflow shows how this can be done if only two cases need to be supported:</p>
  
  <p><a href="https://stackoverflow.com/questions/41593973/how-to-conditionally-wrap-a-div-around-ng-content">How to conditionally wrap a div around ng-content</a></p>
  
  <p>Using that approach I managed the following:</p>
  
  <p><strong>Updated: header-wrapper.component.html</strong></p>
  
  <pre><code>&lt;h1 *ngIf="level &amp;&amp; level === 1; else notOne"&gt;
    &lt;ng-container *ngTemplateOutlet="content"&gt;&lt;/ng-container&gt;
  &lt;/h1&gt;
  
  &lt;ng-template #notOne&gt;
    &lt;h2 *ngIf="level &amp;&amp; level === 2; else notTwo"&gt;
      &lt;ng-container *ngTemplateOutlet="content"&gt;&lt;/ng-container&gt;
    &lt;/h2&gt;
  &lt;/ng-template&gt;
  
  &lt;ng-template #notTwo&gt;
    &lt;h3 *ngIf="level &amp;&amp; level === 3; else notThree"&gt;
      &lt;ng-container *ngTemplateOutlet="content"&gt;&lt;/ng-container&gt;
    &lt;/h3&gt;
  &lt;/ng-template&gt;
  
  &lt;ng-template #notThree&gt;
    &lt;h4 *ngIf="level &amp;&amp; level === 4; else notFour"&gt;
      &lt;ng-container *ngTemplateOutlet="content"&gt;&lt;/ng-container&gt;
    &lt;/h4&gt;
  &lt;/ng-template&gt;
  
  &lt;ng-template #notFour&gt;
    &lt;h5 *ngIf="level &amp;&amp; level === 5; else content"&gt;
      &lt;ng-container *ngTemplateOutlet="content"&gt;&lt;/ng-container&gt;
    &lt;/h5&gt;
  &lt;/ng-template&gt;
  
  &lt;ng-template #content&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>This produces the desired output.</p>
  
  <p><strong>My question</strong></p>
  
  <p>Is this really the only way to do this? Or is there an easier way that I am missing?</p>