title: How to display a h2 once using *ngFor and *ngIf
body: <p>I have an array of words consisting of 2, 3, 4, 5 and so on letter words.
  im using an ng-For to iterate through the array and ng-if to display the words according to the amount of letters but i cant seem to get a title in to separate them</p>
  <p>expected outcome</p>
  <p>2 letter words
  to am as .......</p>
  <p>3 letter words
  the bee sin .......</p>
  <p>and so on,</p>
  <p>this is what i have so far</p>
  <pre><code>&lt;div *ngIf=&quot;data&quot;&gt;
    &lt;h2 class=&quot;title&quot;&gt;{{data.letters}}&lt;/h2&gt;
    &lt;ul class=&quot;wordList&quot; *ngFor=&quot;let item of data.word&quot;&gt;
        &lt;li *ngIf=&quot;item.length ==2&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==3&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==4&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==5&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==6&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==7&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==8&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==9&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==10&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==11&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==12&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==13&quot;&gt;{{item}}&lt;/li&gt;
        &lt;li *ngIf=&quot;item.length ==14&quot;&gt;{{item}}&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>i know i should also be using an index to iterate through the sized words, ill get to that after :)</p>