<p dir="auto"><strong>Feature</strong></p>
<p dir="auto">In Angular 1 it was possible to store the intermediate result of a filtered ngFor. Since v1.3 beta17 it's even easier by using an alias expression. See the docs here: <a href="https://code.angularjs.org/1.3.0-beta.17/docs/api/ng/directive/ngRepeat" rel="nofollow">https://code.angularjs.org/1.3.0-beta.17/docs/api/ng/directive/ngRepeat</a>. But in Angular 2 this feature seems to be missing.</p>
<p dir="auto"><strong>Use case as an example</strong></p>
<p dir="auto">My (example) use case: I'm using a pipe to filter a list of items depending on a search text. When the result list is empty, I want to be able to notify the user about this empty state, e.g. with a text "No search results." or similar. In addition, it would be nice to show the number of found search results at any time. In Angular 1, I was able to save the intermediate filter result in a variable and work with its length property to achieve this.</p>
<p dir="auto">Will this feature be coming in Angualr 2 or should we better not use a Pipe in this case? Although I think a Pipe is the nicest solution here.</p>
<p dir="auto">Particularly for use cases where piped output is bound to in many places within a template, it's beneficial to have a single piped expression. For example, this observable that's piped into a template:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
  &lt;ul&gt;
    &lt;div *ng-if=&quot;!(people | async)&quot;&gt;
      Loading people
    &lt;/div&gt;
    &lt;div *ng-if=&quot;people | async&quot;&gt;
      &lt;li *ng-for=&quot;person of people | async&quot;&gt;
        {{person.name}}
      &lt;/li&gt;
    &lt;/div&gt;
  &lt;/ul&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*ng-if</span>="<span class="pl-s">!(people | async)</span>"<span class="pl-kos">&gt;</span>
      Loading people
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*ng-if</span>="<span class="pl-s">people | async</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">*ng-for</span>="<span class="pl-s">person of people | async</span>"<span class="pl-kos">&gt;</span>
        {{person.name}}
      <span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">This would cause three subscriptions to be created for the people observable, which may re-do the work of getting the observable value if the observable is not a multicast observable. This is also problematic if inside of the ng-if that evaluates to true when the observable has emitted a value, there are expressions that assume people | async is not null, such as: <code class="notranslate">{{people | async.length }}</code>. This would raise an exception since the first value returned from the async pipe would be <code class="notranslate">null</code>.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vsavkin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vsavkin">@vsavkin</a> and I put together a prototype directive, which I'm currently using in the <a href="https://github.com/angular/angular/blob/master/modules/examples/src/http/http_comp.ts"><code class="notranslate">http</code> example</a> that supports assigning the result of a piped expression to a local variable within the template:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div *assign-local=&quot;#unwrappedPeople to people | async&quot;&gt;
  &lt;ul *ng-if=&quot;unwrappedPeople&quot; class=&quot;people&quot;&gt;
    &lt;li *ng-for=&quot;#person of unwrappedPeople&quot;&gt;
      hello, {{person.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;span *ng-if=&quot;!unwrappedPeople&quot;&gt;
    Fetching people...
  &lt;/span&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*assign-local</span>="<span class="pl-s">#unwrappedPeople to people | async</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">ul</span> <span class="pl-c1">*ng-if</span>="<span class="pl-s">unwrappedPeople</span>" <span class="pl-c1">class</span>="<span class="pl-s">people</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">*ng-for</span>="<span class="pl-s">#person of unwrappedPeople</span>"<span class="pl-kos">&gt;</span>
      hello, {{person.name}}
    <span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">*ng-if</span>="<span class="pl-s">!unwrappedPeople</span>"<span class="pl-kos">&gt;</span>
    Fetching people...
  <span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">This creates a single subscription and simplifies the rest of the template. Here is the implementation: <a href="https://github.com/angular/angular/blob/master/modules/examples/src/http/assign_local_directive.ts">https://github.com/angular/angular/blob/master/modules/examples/src/http/assign_local_directive.ts</a></p>
<p dir="auto">I'd like to add this directive as a first-class directive in the angular2 module.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vsavkin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vsavkin">@vsavkin</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tbosch/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tbosch">@tbosch</a> do you have any feedback on the implementation?</p>