Customize change detection to perform deep object compare instead of reference equals check in Angular2
<p>I've created a filter-pipe to perform filtering for an array of objects.
This pipe gets a <code>filterArgs</code> object which contains some properties on which basis the items should be filtered.</p>

<pre><code>@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(items: Item[], filterArgs: any): Item[] {
        return items.filter(item =&gt; ...);
    }
}
</code></pre>

<p>Additionally, I have some input fields where users can set the filter arguments. I bind the properties of the <code>filterArgs</code> object directly and apply the filter for the items like this:</p>

<pre><code>&lt;input type="date" [(ngModel)]="filterArgs.dateFrom"&gt;
&lt;input type="date" [(ngModel)]="filterArgs.dateTo"&gt;

&lt;ul&gt;
    &lt;li *ngFor="let item of items | filter:filterArgs&gt;...&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>In my component, the <code>filterArgs</code> object is defined as follows (schematic):</p>

<pre><code>public filterArgs: any;

ngOnInit() {
    this.filterArgs = {
        dateFrom = undefined,
        dateTo = undefined
    };
}
</code></pre>

<p>So the problem now is, that the filter doesn't get applied when one of the input fields change. As far is I've understood Angular's change detection, this is because the <code>filterArgs</code> object's reference doesn't change and therefore Angular doesn't detect any changes. This is expected behavior and by design.</p>

<p>My question now is: What's the proposed way to resolve this issue?</p>

<p>The naive approach would be to create a new <code>filterArgs</code> object every time an input field changes, so that the reference of this object gets updated. In that case Angular's change detection would kick in. But there must be a better way to do this. I'd image that I could annotate the <code>filterArgs</code> property with some kind of attribute that tells Angular to perform a "deep object compare" for detecting changes.</p>