Changing router-outlet with *ngIf in app.component.html in angular2 : <p>I am using angular 2.0 final. I am trying to change the location of the <strong>router-outlet</strong> in the main app.component.html. The template is updating fine display wise except, the first time I use router.navigate the component won't display in the new router-outlet, and there is no error.  The second and every time after I use router.navigate it works properly.</p>

<p><strong>example template of app.component.html</strong></p>

<pre><code>   &lt;div *ngIf="authenticated() == false"&gt;
      &lt;h1&gt;not logged in&lt;/h1&gt;
      &lt;router-outlet&gt;
      &lt;/router-outlet&gt;
    &lt;/div&gt;
    &lt;div *ngIf="authenticated()"&gt;
      &lt;h1&gt;logged in&lt;/h1&gt;
      &lt;router-outlet&gt;
      &lt;/router-outlet&gt;
    &lt;/div&gt;
</code></pre>
