arrays - How to display a h2 once using *ngFor and *ngIf

Question

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

expected outcome

2 letter words to am as .......

3 letter words the bee sin .......

and so on,

this is what i have so far

<div *ngIf="data">
  <h2 class="title">{{data.letters}}</h2>
  <ul class="wordList" *ngFor="let item of data.word">
      <li *ngIf="item.length ==2">{{item}}</li>
      <li *ngIf="item.length ==3">{{item}}</li>
      <li *ngIf="item.length ==4">{{item}}</li>
      <li *ngIf="item.length ==5">{{item}}</li>
      <li *ngIf="item.length ==6">{{item}}</li>
      <li *ngIf="item.length ==7">{{item}}</li>
      <li *ngIf="item.length ==8">{{item}}</li>
      <li *ngIf="item.length ==9">{{item}}</li>
      <li *ngIf="item.length ==10">{{item}}</li>
      <li *ngIf="item.length ==11">{{item}}</li>
      <li *ngIf="item.length ==12">{{item}}</li>
      <li *ngIf="item.length ==13">{{item}}</li>
      <li *ngIf="item.length ==14">{{item}}</li>

    </ul>
</div>

i know i should also be using an index to iterate through the sized words, ill get to that after :)

question from:https://stackoverflow.com/questions/65865963/how-to-display-a-h2-once-using-ngfor-and-ngif

Answer 1

Make use of a Pipe to transform the array of words into an object whose key is the length of the word and whose values are the words themselves.

@Pipe({ name: 'groupByWordsPipe' })
export class GroupByWordsPipe implements PipeTransform {

    transform(input: []) {
        let map = {};
        input.forEach((e: string) => {
            if (map[e.length]) {
                map[e.length] = map[e.length] + ' ' + e;
            } else {
                map[e.length] = e;
            }
        });
        return map;
    }

}

Now you can easily use this on your template with the following syntax:

<div *ngFor="let word of words | groupByWordsPipe | keyvalue">
    <h2>{{word.key}}</h2> letter words : {{word.value}}
</div>