title: How to filter items inside “ngFor” loop, based on object property string
body: <p>I need to filter items inside an <code>ngFor</code> loop, by changing the category in a drop-down list. Therefore, when a particular category is selected from the list, it should only list the items containing that same category.</p>
  
  <p>HTML Template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select&gt;
    &lt;option *ngFor="let model of models"&gt;{{model.category}}&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;ul class="models"&gt;
    &lt;li *ngFor="let model of models" (click)="gotoDetail(model)"&gt;
    &lt;img [src]="model.image"/&gt;
    {{model.name}},{{model.category}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Items Array:</p>
  
  <pre class="lang-ts prettyprint-override"><code>export var MODELS: Model[] = [
  { id: 1, 
    name: 'Model 1', 
    image: 'img1', 
    category: 'Cat1', 
  },
  
  { id: 2, 
    name: 'Model 2', 
    image: 'img2', 
    category: 'Cat3',
  },
  
  { id: 3, 
    name: 'Model 3', 
    image: 'img3', 
    category: 'Cat1',
  },
  { id: 4, 
    name: 'Model 4', 
    image: 'img4', 
    category: 'Cat4',
  },
  
  ...
  ];
  </code></pre>
  
  <p>Also, the drop-down list contains repeated category names. It is necessary for it to list only unique categories (strings).</p>
  
  <p>I know that creating a custom pipe would be the right way to do this, but I don't know how to write one.</p>
  
  <p>Plunker:  <a href="http://plnkr.co/edit/tpl:2GZg5pLaPWKrsD2JRted?p=preview" rel="noreferrer">http://plnkr.co/edit/tpl:2GZg5pLaPWKrsD2JRted?p=preview</a></p>