<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="[X] bug report
[ ] 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">[X] bug report
[ ] 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">When binding the required attribute on an input tag, angular2 applies the required validator through the RequiredValidator directive even if the supplied expression evaluates to false.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">The validator is not added or checks the supplied expression before validation.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Component } from '@angular/core';

@Component({
    selector: 'demo-bug',
    template: `
      &lt;input type=&quot;text&quot; [(ngModel)]=&quot;value&quot; [required]=&quot;isRequired&quot; #spy&gt;
      &lt;br&gt;
      {{spy.className}}
    `
})
export class BugComponent {
    value: string;
    isRequired = false;
    constructor() { }
}"><pre class="notranslate"><code class="notranslate">import { Component } from '@angular/core';

@Component({
    selector: 'demo-bug',
    template: `
      &lt;input type="text" [(ngModel)]="value" [required]="isRequired" #spy&gt;
      &lt;br&gt;
      {{spy.className}}
    `
})
export class BugComponent {
    value: string;
    isRequired = false;
    constructor() { }
}
</code></pre></div>
<p dir="auto"><a href="http://plnkr.co/edit/os4Y1lA2P1wlbpq8ThNt" rel="nofollow">http://plnkr.co/edit/os4Y1lA2P1wlbpq8ThNt</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">ng-invalid is not applied</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">Correct behavior</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [all]</li>
</ul>
<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="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] 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">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] 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><br>
I created a component nav-header which is meant to contain my </p> code. And to ensure that this is maintained across my application. When I use the <code class="notranslate">&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> it duplicates the body of my application component where called.<p dir="auto"></p>
<p dir="auto">For instance if I call the <code class="notranslate">&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> in the nav-header component, it duplicates and inserts the application component in the nav-header component.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
That it doesn't duplicate the code :-)</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
You can have a look at my application here, in particular these files:<br>
<a href="https://github.com/drpain/ThatGuy-Angie/blob/master/app/app.component.ts">Application Component</a><br>
<a href="https://github.com/drpain/ThatGuy-Angie/blob/master/app/app.module.ts">Application Modules</a><br>
<a href="https://github.com/drpain/ThatGuy-Angie/blob/master/app/nav-header.component.ts">Header Navigation Component</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
<code class="notranslate">3.19.0-65-generic #73~14.04.1-Ubuntu SMP</code> AMD64</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> [Chrome Latest | Firefox Latest ]</li>
<li><strong>Language:</strong> [TypeScript 1.8.10]</li>
</ul>