angular - Reuseable Components / Directives ng2 -

i have navigation component :

import {component} '@angular/core';  const template = require('./navigation.jade'); const styles = require('./navigation.sass');  @component({     selector: 'navigation',     templateurl: template,     styleurls: [styles] })  export class navcomponent {   } 

rather manually add head of every page, i'd include in app.component.ts file.

currently achieving follows :

import {component, viewencapsulation} '@angular/core'; import {router_directives} '@angular/router';  import {navcomponent} './components/navigation/navigation.component';  const styles = require('./base-styles.sass');  @component({     selector: 'app',     directives: [router_directives, navcomponent],     encapsulation: viewencapsulation.none,     styles: [styles],     template: `     <navigation></navigation>     <div class="container"> <router-outlet></router-outlet>     </div>` }) export class appcomponent { } 

however importing component , including directive selector feels wrong, i'm sure not correct, how best can achieve this?

if try convert directive, not able require in template file , import navigation bar dom.

i'm new ng , keen learn best practice, may work, feels little 'hacky...'

you can provide directives globally

provide({provide: platform_directives, usevalue: [navcomponent], multi: true}) 

but in general way preferred way.