title: How to call pipe only on value change
body: <p>I am using angular 2 with primeng p-dropdown and have a case where I need to filter a child dropdown when the user selects a parent. I did it using a custom pipe like</p>
  
  <pre><code>&lt;p-dropdown [options]="carTypesOptions" [(ngModel)]="CarTypeId" name="CarTypeId"&gt;&lt;/p-dropdown&gt;
  &lt;p-dropdown [options]="carMakeOptions | filterCarMakes: CarTypeId" [(ngModel)]="CarMakeId" name="CarMakeId"&gt;&lt;/p-dropdown&gt;
  </code></pre>
  
  <p>So when user selects a car type, I am filtering the second dropdown by using the filterCarMakes pipe which takes the CarTypeId (parent selected id). It all works great. Here's my <code>filterCarMakes</code> pipe.</p>
  
  <pre><code>@Pipe({
      name: 'filterCarMakes',
      pure: false
  })
  export class FilterMakesPipe implements PipeTransform {
      transform(carMakesOptions: CarMakeSelectItem[], carTypeId: string): CarMakeSelectItem[] {
          if (!carTypeId)
              return carMakesOptions.filter(p =&gt; p.carTypeId == null);
          //perform some filtering operation
          return filteredCarMakeOptions;
      }
  }
  </code></pre>
  
  <p>The issue is if I put a console.log in the pipe, it would continue to log that message on console very quickly (like once every 100ms) which means it will continue to call even if the value of parent does not change. The side effect of this is, I can't select any value in child dropdown if there's a scroll because it continues to refresh the options.</p>
  
  <p>Simple screenshot of filtered dropdown is below (it won't let me scroll to select other values and will continue to refresh)</p>
  
  <p><a href="https://i.stack.imgur.com/ARB7t.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ARB7t.png" alt="enter image description here"></a></p>
  
  <p>P.S: I don't want to do it in onChange event and calling the pipe from component, so is it possible to do it inside template?</p>