title: How to use directives in angular2
body: <p>I want to load my navbar.html in my app.component.html for that i used directives and follwed the below method,</p>
  
  <p>my navbar html,</p>
  
  <pre><code>&lt;p&gt;Hi i am a pen&lt;/p&gt;
  </code></pre>
  
  <p>my navbar.ts,</p>
  
  <pre><code> import {Component,Directive, OnInit} from '@angular/core';
      @Component({
      selector: 'header-Navbar',
      templateUrl: './app/navbar/navbar.html',
       })
      export class Navbar  {}
  </code></pre>
  
  <p>my app.component.html,</p>
  
  <pre><code>    &lt;header-Navbar&gt;&lt;/header-Navbar&gt;
  </code></pre>
  
  <p>my app.component.ts,</p>
  
  <pre><code>import {Component,Directive, OnInit} from '@angular/core';
  import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
  import { Http, Headers } from '@angular/http';
  import { Navbar }  from '../navbar/navbar';
  import {PathLocationStrategy, LocationStrategy, Location} from '@angular/common';
  import { Config } from '../headers';
  @Component({
      selector: 'my-app',
      directives : [Navbar],----&gt;Saying type error
      templateUrl: './app/components/app.component.html',
      providers: [Config]
  })
  </code></pre>
  
  <p>My error,</p>
  
  <pre><code>   'header-Navbar' is not a known element:
  1. If 'header-Navbar' is an Angular component, then verify that it is part of this module.
  2. If 'header-Navbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
          [ERROR -&gt;]&lt;header-Navbar&gt;&lt;/header-Navbar&gt;
  </code></pre>
  
  <p>This is my situation and i am not sure about how to solve it,can any one suggest me help.Thanks.</p>