<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature 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">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature 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>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">Right now, there are two ways to get a component's "index":</p>
<ul dir="auto">
<li>Using <code class="notranslate">*ngFor</code> and getting the index from the context.</li>
<li>Using <code class="notranslate">@ContentChildren</code> or <code class="notranslate">@ViewChildren</code> on a parent component and moving the whatever logic uses the index to said parent component (only works when we are only interested in the index <em>among components of the same class</em>).</li>
</ul>
<p dir="auto">In cases where both of these are not possible, we have no way of getting a component's index. For instance, if you have a <code class="notranslate">TemplateRef</code> that contains several of your component statically:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;my-component&gt;AAA&lt;my-component&gt;
  &lt;my-component&gt;BBB&lt;my-component&gt;
  &lt;my-component&gt;CCC&lt;my-component&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">my-component</span><span class="pl-kos">&gt;</span>AAA<span class="pl-kos">&lt;</span><span class="pl-ent">my-component</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">my-component</span><span class="pl-kos">&gt;</span>BBB<span class="pl-kos">&lt;</span><span class="pl-ent">my-component</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">my-component</span><span class="pl-kos">&gt;</span>CCC<span class="pl-kos">&lt;</span><span class="pl-ent">my-component</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">The parents that could query for <code class="notranslate">my-component</code> are the ones from the original template's location, not the ones from where the template is instantiated.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">I do not know if it is possible, but I understand that each component has its own view, which is inserted inside a view container. Having access to the index of that view within its view container would be very useful.<br>
If this is not possible for some reason, I'd be very interested in knowing why, so I can understand more about the structure of the runtime app.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">This is a feature request, nothing to reproduce.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Write "ordered" reusable components, or components that care about the number of siblings before them, that would work in any context (with or without <code class="notranslate">*ngFor</code>, inside a template embedded in another part of the app, ...).</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.X</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> all</li>
</ul>

<ul dir="auto">
<li><strong>Language:</strong> all</li>
</ul>
<h1 dir="auto">Use Case</h1>
<p dir="auto"><code class="notranslate">&lt;ng-content&gt;</code> allows for static (compile time resolution) projection of content. There are cases where the projection needs to be controlled programmatically. A common example is when the parent component would like to wrap/decorate the child components during projection.</p>
<h1 dir="auto">Mental Model</h1>
<p dir="auto">The mental model would be that <code class="notranslate">&lt;ng-content&gt;</code> is for fast static projection, but for dynamic projection one would use a query to get a hold of the child components in the form of <code class="notranslate">ViewRef</code>s which could then be inserted programmatically at any location in the tree.</p>
<h1 dir="auto">Possible Solution</h1>
<ul dir="auto">
<li><code class="notranslate">ContentViewRef</code> extends <code class="notranslate">ViewRef</code></li>
<li><code class="notranslate">@Content(selector)</code> Provides a way to select direct children content elements using CSS selectors. (This would be after directives such as <code class="notranslate">ngFor</code> would unroll the content, and it would be in the correct order.)</li>
<li>This would allow selection of elements rather than directives. These <code class="notranslate">ContentViewRef</code>s could then be reinserted to any <code class="notranslate">ViewContainerRef</code></li>
<li>We would need <code class="notranslate">ngViewOutlet</code> (similar to <code class="notranslate">ngTemplateOutlet</code>).</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  template: `
  &lt;div *ngFor=&quot;let view of allViews&quot;&gt;
    &lt;template ngViewOutlet=&quot;view&quot;&gt;&lt;/template&gt;
  &lt;/div&gt;
  &lt;ng-content&gt;&lt;!-- project non selected nodes, such as text nodes --&gt;&lt;/ng-content&gt;
`
})
class MySelect {
  @Content('*') allViews: ContentViewRef[];

  // another example
  @Content('my-option') optionViews: ContentViewRef[];
}"><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">  &lt;div *ngFor="let view of allViews"&gt;</span>
<span class="pl-s">    &lt;template ngViewOutlet="view"&gt;&lt;/template&gt;</span>
<span class="pl-s">  &lt;/div&gt;</span>
<span class="pl-s">  &lt;ng-content&gt;&lt;!-- project non selected nodes, such as text nodes --&gt;&lt;/ng-content&gt;</span>
<span class="pl-s">`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MySelect</span> <span class="pl-kos">{</span>
  @<span class="pl-smi">Content</span><span class="pl-kos">(</span><span class="pl-s">'*'</span><span class="pl-kos">)</span> <span class="pl-c1">allViews</span>: <span class="pl-smi">ContentViewRef</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

  <span class="pl-c">// another example</span>
  @<span class="pl-smi">Content</span><span class="pl-kos">(</span><span class="pl-s">'my-option'</span><span class="pl-kos">)</span> <span class="pl-c1">optionViews</span>: <span class="pl-smi">ContentViewRef</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'app',
  template: `
&lt;my-select&gt;
     Option
    &lt;my-option&gt;header&lt;/my-option&gt;
    &lt;my-option *ngFor=&quot;let item in items&quot;&gt;unrolled items {{item}}&lt;/my-option&gt;
    &lt;my-option-group&gt;
        &lt;my-option&gt;
            foo &lt;b&gt;bar&lt;/b&gt;
            &lt;other-directive /&gt;
&lt;/my-option&gt;
        &lt;my-separator&gt;&lt;/my-separator&gt;
        &lt;my-option&gt;&lt;/my-option&gt;
&lt;/my-option-group&gt;
&lt;/my-select&gt;
`
})
class App {}"><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">&lt;my-select&gt;</span>
<span class="pl-s">     Option</span>
<span class="pl-s">    &lt;my-option&gt;header&lt;/my-option&gt;</span>
<span class="pl-s">    &lt;my-option *ngFor="let item in items"&gt;unrolled items {{item}}&lt;/my-option&gt;</span>
<span class="pl-s">    &lt;my-option-group&gt;</span>
<span class="pl-s">        &lt;my-option&gt;</span>
<span class="pl-s">            foo &lt;b&gt;bar&lt;/b&gt;</span>
<span class="pl-s">            &lt;other-directive /&gt;</span>
<span class="pl-s">&lt;/my-option&gt;</span>
<span class="pl-s">        &lt;my-separator&gt;&lt;/my-separator&gt;</span>
<span class="pl-s">        &lt;my-option&gt;&lt;/my-option&gt;</span>
<span class="pl-s">&lt;/my-option-group&gt;</span>
<span class="pl-s">&lt;/my-select&gt;</span>
<span class="pl-s">`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">App</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>