How to include a navbar with directives in Angular?
<p>Is there a "correct" way to add navbar's to your Angular application? I have a 3 component app, where I would like all of the pages to show a navbar at the top of. I would like this navbar to include Angular Router links and toggle it's appearance based on user logged in or not. If I just stick the following code into my app.component template, then the pages loose their angular functionality. I am, not sure why this happens, but I can see why that approach is not good.  </p>

<pre><code>&lt;div class="nav"&gt;
    &lt;a [routerLink]="['Login']"&gt;Login&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>Do you create a separate component, or is that overkill? Just looking if there is any conventional wisdom, otherwise, just for a working solution. (I don't think that is too subjective, but I guess you'll let me know if it is ;) ).</p>

<h1>Update:</h1>

<p>So here is my app.component.ts</p>

<pre><code>import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';

import {TodoService} from './todo/services/todo.service';
import { TodoCmp } from './todo/components/todo.component';

@Component({
  selector: 'my-app',
  template: `
    //here is where I tried the navbar
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  `,
  styleUrls: ['client/dev/todo/styles/todo.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [
    TodoService,
    UserService
  ]
})
@RouteConfig([
  {
    path: '/',
    name: 'TodoCmp',
    component: TodoCmp,
    useAsDefault: true
  }
  //other paths
])

export class AppComponent {
  title = 'ng2do';
}
</code></pre>

<p>and this is how it renders, as the code above shows:</p>

<p><a href="https://i.stack.imgur.com/nFtd1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nFtd1.png" alt="enter image description here"></a></p>

<p>and then if I add the navbar code with angular references:</p>

<p><a href="https://i.stack.imgur.com/NGZbf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NGZbf.png" alt="enter image description here"></a></p>

<p>Alternatively, if I create a Nav.Component, with selector <code>nav-bar</code>, then I can change my app.component template from: </p>

<pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>

<p>to: </p>

<pre><code>&lt;nav-bar&gt;&lt;/nav-bar&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>

<p>but with this approach the nav bar doesn't seem to render at all and the other component displays as normal?</p>