<ul dir="auto">
<li><strong>I'm submitting a bug report</strong></li>
<li><strong>Current behavior</strong></li>
</ul>
<p dir="auto">In the example provided below, there's an ngFor iterating over an array of Observables. Within the ngFor, each of the Observables is subscribed and its value output using the async pipe. By hitting a "Hide things" button, the ngFor template is destroyed (using ngIf). When the ngFor is destroyed , only half the subscriptions made by the async pipe are unsubscribed.</p>
<ul dir="auto">
<li><strong>Expected/desired behavior</strong></li>
</ul>
<p dir="auto">After the ngFor template is destroyed, all the subscriptions made by the async pipe are unsubscribed.</p>
<ul dir="auto">
<li><strong>Steps to reproduce and if possible a minimal demo of the problem</strong></li>
</ul>
<p dir="auto"><a href="http://plnkr.co/edit/C0hPY9HgfZ1QytdDK4hv" rel="nofollow">http://plnkr.co/edit/C0hPY9HgfZ1QytdDK4hv</a></p>
<p dir="auto">This should show "Thing X", with X being between 1 and 10 (inclusive). The numbers are output by the async pipe within an ngFor template. The Observables simply emit their number once to subscribers, and nothing further (no completion). They log subscriptions and unsubscriptions to the console.</p>
<p dir="auto">Click on "Hide things" to destroy that ngFor template. The first time you do so, you will see that the subscription count changes from 10 to 5. The expected behaviour is that it changes from 10 to 0. In the console, you can see (by omission) that every second subscription made by async is <em>not</em> unsubscribed:</p>
<p dir="auto">Unsubscribed from thing 1<br>
Unsubscribed from thing 3<br>
Unsubscribed from thing 5<br>
Unsubscribed from thing 7<br>
Unsubscribed from thing 9</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.1</li>
<li><strong>Browser:</strong> Chrome 51.0.2704.79</li>
<li><strong>Language:</strong> TypeScript 1.8.10</li>
</ul>
<p dir="auto"><strong>Steps to reproduce and a minimal demo of the problem</strong><br>
demo <a href="http://plnkr.co/edit/7uoVecfa62i8No8GtQHI?p=preview" rel="nofollow">http://plnkr.co/edit/7uoVecfa62i8No8GtQHI?p=preview</a><br>
Angular2 beta 16 or higher - When I hide first section with nested components using *ngIf, ngOnDestroy of every nested component is triggered - this is OK.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &lt;div *ngIf=&quot;!ff2&quot;&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
  &lt;/div&gt;"><pre class="notranslate"><code class="notranslate">  &lt;div *ngIf="!ff2"&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
  &lt;/div&gt;
</code></pre></div>
<p dir="auto">Outpu in console is</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    init
    init
    init
    init
    init
    destroy
    destroy
    destroy
    destroy
    destroy
"><pre class="notranslate"><code class="notranslate">    init
    init
    init
    init
    init
    destroy
    destroy
    destroy
    destroy
    destroy

</code></pre></div>
<p dir="auto">But when I hide second section where subcomponents are duplicated by *ngFor, not every ngOnDestroy is triggered.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div *ngIf=&quot;!ff&quot;&gt;
   &lt;my-component
     *ngFor=&quot;#i of [1,2,3,4,5,6]&quot;
   &gt;&lt;/my-component&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div *ngIf="!ff"&gt;
   &lt;my-component
     *ngFor="#i of [1,2,3,4,5,6]"
   &gt;&lt;/my-component&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">output in console is</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(6) init
(3) destroy"><pre class="notranslate"><code class="notranslate">(6) init
(3) destroy
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
not every ngOnDestroy is triggered</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
every ngOnDestroy should be triggered</p>
<p dir="auto"><strong>Other information</strong><br>
in angular2 beta 9 it was working correctly<br>
<a href="http://plnkr.co/edit/Q8tLJKlpF6wEVcMWfxH1?p=preview" rel="nofollow">http://plnkr.co/edit/Q8tLJKlpF6wEVcMWfxH1?p=preview</a></p>