1

I want to use a component in another component (home.html). But i get an error as :

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 ->]

Here is my "reusable.html" file.

<ion-header>
 <ion-navbar>
<ion-button (click) = "onPress()">
  Logout 
</ion-title>
</ion-navbar>
</ion-header>

Here is my reusable.ts file:

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 => {
        console.log(toast);
  });
}  
}

Here is my home.html file where i am using it:

<reusable>
  </reusable> 

<ion-content padding>
 <p> The world is your oyster. <p>
</ion-content>

Here is my app.module.ts file:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
SHACHINDRA TRIPATHI
  • 77
  • 1
  • 19

1 Answers1

2

You should add your component to declarations array of the module in which it is implemented, to be used by other components of the same module. To utilize them in another module, you should be adding that component to exports array as well.

declarations: [
    MyApp,
    HomePage,
    ReusableComponent 
  ],
Amit Chigadani
  • 28,482
  • 13
  • 80
  • 98