<p dir="auto"><strong>I'm submitting a ...</strong></p>
<p dir="auto">[ ] bug report =&gt; search github for a similar issue or PR before submitting<br>
[x] feature request<br>
[ ] support request =&gt; Please do not submit support request here, instead see</p>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Property bindings check for changes by comparing object reference. And there is no way of having the change check compare a subproperty object reference instead of the root object reference.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">I can specify either a subproperty object reference to check instead, or a subproperty primitive to check by value.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">The <code class="notranslate">doCheck</code> hook is often times more complex than is necessary for simply specifying a more specific field to check in the change tracking process.</p>
<p dir="auto">I would think it would be <em>very</em> useful, and not entirely outside of the spirit of the framework, to be able to do something such as <code class="notranslate">[hero]="hero track by hero.stats"</code>. So that, in the parent component, I can overwrite the hero objects <code class="notranslate">stats</code> field and have the new object propagate down to the child without having to rewrite all other properties on the hero. Ones that don't really change, like maybe <code class="notranslate">id</code> or <code class="notranslate">name</code>.</p>
<p dir="auto">I'm primarily an angular 1 developer, and I made this feature request over there, but they basically said they would only consider it if they knew there would be a comparable feature in ng2.</p>
<p dir="auto">Reference: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="203788478" data-permission-text="Title is private" data-url="https://github.com/angular/angular.js/issues/15647" data-hovercard-type="issue" data-hovercard-url="/angular/angular.js/issues/15647/hovercard" href="https://github.com/angular/angular.js/issues/15647">angular/angular.js#15647</a></p>
<h2 dir="auto">I'm submitting a...</h2>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<h2 dir="auto">Current behavior</h2>
<p dir="auto">Angular checks if bounded value has changed by identity</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">We need a way to inform change detection mechanism that bounded object has changed.<br>
Obvious way would be using observables as inputs, but it has some drawbacks:</p>
<ul dir="auto">
<li>we must change existing code so it expects observable as input (not always possible)</li>
<li>only possible when binding to component/directive input - cannot use with <code class="notranslate">{{ }}</code></li>
<li>it adds more boilerplate code</li>
</ul>
<p dir="auto">I suggest that angular have a special type of observable, let's say instance of <code class="notranslate">SpecialObservable</code> class for now.<br>
When it's passed as input, angular would not detect changes by identity, but it will subscribe to it and pass values from this observable is input.<br>
Why not using <code class="notranslate">async</code> pipe then?<br>
Concept is very similar, but everything returned by <code class="notranslate">async</code> pipe is still subject to change detection. If observable emits two the same objects, second won't trigger change in input.</p>
<h2 dir="auto">What is the motivation / use case for changing the behavior?</h2>
<p dir="auto">We can create a sophisticated way of detecting changes in input suited for specific use.<br>
For example, it would be possible to implement one time binding like this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Pipe({ name: 'once', pure: false })
export class OncePipe implements PipeTransform {
  private completed = false;
  private subject= new Subject&lt;any&gt;();
  private observable = new SpecialObservable(this.subject);
  transform(value: any) {
    if (!this.completed) {
      this.completed = true;
      this.subject.next(value);
      this.subject.complete();
    }
    return observable;
  }
}"><pre class="notranslate">@<span class="pl-smi">Pipe</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'once'</span><span class="pl-kos">,</span> <span class="pl-c1">pure</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">OncePipe</span> <span class="pl-k">implements</span> <span class="pl-smi">PipeTransform</span> <span class="pl-kos">{</span>
  <span class="pl-k">private</span> <span class="pl-c1">completed</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
  <span class="pl-k">private</span> <span class="pl-c1">subject</span><span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Subject</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">private</span> <span class="pl-c1">observable</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">SpecialObservable</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">subject</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-en">transform</span><span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">any</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">completed</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">completed</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">subject</span><span class="pl-kos">.</span><span class="pl-en">next</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">subject</span><span class="pl-kos">.</span><span class="pl-en">complete</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span> <span class="pl-s1">observable</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">usage: <code class="notranslate">{{ value | once }}</code><br>
Also, we can have change detection in mutable objects.</p>