title: how to skip in ngFor if was true, or other ways (Angular)
body: <p>I have a more theoretical question, in my app, I have a component that receives as <code>@Input</code> an array with objects, where can be(or not) one of three categories, that also divides into three types, so here are the main categories:</p>
  <ol>
  <li>car_def</li>
  <li>car_fyr</li>
  <li>car_spy</li>
  </ol>
  <p>and also each of them can be with parts <code>_mid</code> or <code>_low</code> to show its priority</p>
  <p>So arr can look like this:</p>
  <pre><code>[
    {id: 2, key: &quot;car_def&quot;},
    {id: 2, key: &quot;car_def_low&quot;},
    {id: 2, key: &quot;car_fyr&quot;},
    {id: 2, key: &quot;car_fyr_mid&quot;}
  ]
   OR
  [
    {id: 2, key: &quot;car_spy&quot;},
    {id: 2, key: &quot;car_def&quot;},
    {id: 2, key: &quot;car_fyr&quot;},
    {id: 2, key: &quot;car_fyr_mid&quot;}
  ]...
  </code></pre>
  <p>And if I receive some category - I need to display it in the template, but only ONCE and the main name. And also near it should be an icon, for which I have another func, where need to pass a category, as a param.
  SO from example, it should be <code>car_def, car_fyr</code>, or <code>car_spy, car_def, car_fyr</code>.</p>
  <p>As for now, I wrote a function in .ts</p>
  <pre><code>@Input cars;
  ngOnInit(): void {
      this.isDisplayed(this.cars);
  }
  isDisplayed(arr) {
      let str = arr.map(car =&gt; car.key).join(' ');
      if (str.match('car_def')) {
        this.isDef = true;
      }
      if (str.match('car_fyr')) {
        this.isFyr = true;
      }
      if (str.match('car_spy')) {
        this.isSpy = true;
      }
    }
  </code></pre>
  <p>and in HTML I use *ngIf</p>
  <pre><code>&lt;div #container&gt;
    &lt;div *ngIf=&quot;isDef&quot;&gt;
      CAR_DEF &lt;icon icon=&quot;{{displayIcon('car_def')}}&quot;&gt;&lt;/icon&gt;
    &lt;/div&gt;
    &lt;div *ngIf=&quot;isFyr&quot;&gt;
      CAR_FYR &lt;icon icon=&quot;{{displayIcon('car_fyr')}}&quot;&gt;&lt;/icon&gt;
    &lt;/div&gt;
    &lt;div *ngIf=&quot;isSpy&quot;&gt;
      CAR_SPY &lt;icon icon=&quot;{{displayIcon('car_spy')}}&quot;&gt;&lt;/icon&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>SO, my question is, is there a better way to write it? I thought about <code>*ngFor</code> but don't know how to display category only once in this case...</p>
  <p>Would be really grateful for any advice!</p>