<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">Let say we have this code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
    selector:'my-app',
    template:`
    &lt;h2&gt;Chess&lt;/h2&gt;
    &lt;router-outlet [attr.name]=&quot;'a'&quot;&gt;&lt;/router-outlet&gt;
    &lt;router-outlet [attr.name]=&quot;'b'&quot;&gt;&lt;/router-outlet&gt;
    &lt;router-outlet *ngFor=&quot;let name of ['c', 'd']&quot; [attr.name]=&quot;name&quot;&gt;&lt;/router-outlet&gt;
`
})
class Chess {}
"><pre class="notranslate"><code class="notranslate">@Component({
    selector:'my-app',
    template:`
    &lt;h2&gt;Chess&lt;/h2&gt;
    &lt;router-outlet [attr.name]="'a'"&gt;&lt;/router-outlet&gt;
    &lt;router-outlet [attr.name]="'b'"&gt;&lt;/router-outlet&gt;
    &lt;router-outlet *ngFor="let name of ['c', 'd']" [attr.name]="name"&gt;&lt;/router-outlet&gt;
`
})
class Chess {}

</code></pre></div>
<p dir="auto">It doesn't work and it is right. Attribute in router-outlet directive is like a 'const' modifier in typescript. You can set it only manually in a template.<br>
But what if I develop application and set routes and outlets dynamically. How expensive it will be to allow router-outlet directive to be dynamic?</p>
<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>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;router-outlet name=&quot;outlet1&quot;&gt;&lt;/router-outlet&gt;
&lt;router-outlet name=&quot;outlet2&quot;&gt;&lt;/router-outlet&gt;
&lt;router-outlet name=&quot;outlet3&quot;&gt;&lt;/router-outlet&gt;"><pre class="notranslate"><code class="notranslate">&lt;router-outlet name="outlet1"&gt;&lt;/router-outlet&gt;
&lt;router-outlet name="outlet2"&gt;&lt;/router-outlet&gt;
&lt;router-outlet name="outlet3"&gt;&lt;/router-outlet&gt;
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div *ngFor=&quot;let outlet of outletList&quot;&gt;
&lt;router-outlet [name]=&quot;outlet.name&quot;&gt;&lt;/router-outlet&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div *ngFor="let outlet of outletList"&gt;
&lt;router-outlet [name]="outlet.name"&gt;&lt;/router-outlet&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">where outletList = [list1, list2, list3];<br>
where list1.name = 'outlet1';<br>
list2.name = 'outlet2';<br>
list3.name = 'outlet3';</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
N/A</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I am requesting a feature change of router-outlet's name type from <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Attribute/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Attribute">@Attribute</a> to <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a> property, so developers can bind a name dynamically to a router-outlet.<br>
Currently, developers need to hard code a string for router-outlet's name attribute in the html template. If a developer needs to create multiple router outlets, he/she would need to create multiple router outlets and manually add the unique name to each router-outlet.<br>
This would enable developers to develop cleaner code when they use multiple router-outlets.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X<br>
Angular 2.0.0</li>
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]<br>
Chrome</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
node 6.4.0</li>
</ul>