title: Using a reusable component in Ionic 2
body: <p>I want to use a component in another component (home.html). But i get an error as :</p>
  
  <p>Error: Template parse errors: 'reusable' is not a known element: 1. If 'reusable' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]</p>
  
  <p>Here is my "reusable.html" file.</p>
  
  <pre><code>&lt;ion-header&gt;
   &lt;ion-navbar&gt;
  &lt;ion-button (click) = "onPress()"&gt;
    Logout 
  &lt;/ion-title&gt;
  &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;  
  </code></pre>
  
  <p>Here is my reusable.ts file:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Toast } from '@ionic-native/toast';
  
  @Component({
    selector: 'reusable',
    templateUrl: 'reusable.html'
  })
  
  export class ReusableComponent {
  
    constructor(private toast: Toast) { }
  
    onPress(){
      this.toast.show(`You have been logged out!`, '5000', 'center').subscribe(
        toast =&gt; {
          console.log(toast);
    });
  }  
  }
  </code></pre>
  
  <p>Here is my home.html file where i am using it:</p>
  
  <pre><code>&lt;reusable&gt;
    &lt;/reusable&gt; 
  
  &lt;ion-content padding&gt;
   &lt;p&gt; The world is your oyster. &lt;p&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Here is my app.module.ts file:</p>
  
  <pre><code>@NgModule({
    declarations: [
      MyApp,
      HomePage
    ],
    imports: [
      BrowserModule,
      IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      MyApp,
      HomePage
    ],
    providers: [
      StatusBar,
      SplashScreen,
      {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
  })
  export class AppModule {}
  </code></pre>