Using a reusable component in Ionic 2 [duplicate]

Question

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 {}

Can you show your module file? You probably missed to declare or export that component. — Amit Chigadani
– Amit Chigadani, Commented Sep 28, 2018 at 9:38

Amit Chigadani · Accepted Answer · 2018-09-28 09:41:13Z

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

edited Sep 28, 2018 at 9:41

answered Sep 28, 2018 at 9:39

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

core114 Over a year ago

Should be a components module

Amit Chigadani Over a year ago

@core114 Yes, that point is important!

SHACHINDRA TRIPATHI Over a year ago

Thanks @AmitChigadani. It works!

Collectives™ on Stack Overflow

Using a reusable component in Ionic 2 [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related