Categories
Angular Answers

How to use component from another module with Angular?

Spread the love

Sometimes, we want to use component from another module with Angular.

In this article, we’ll look at how to use component from another module with Angular.

How to use component from another module with Angular?

To use component from another module with Angular, we export the module from the source module.

And then we import the exported module from the destination module.

For instance, we write

@NgModule({
  declarations: [FirstPage, ImportantCopmonent],
  imports: [
    IonicPageModule.forChild(NotImportantPage),
    TranslateModule.forChild(),
  ],
  exports: [FirstPage, ImportantCopmonent],
})
export class FirstPageModule {}

to export FirstPage and ImportantCopmonent by putting it in the exports array in the source module.

Then in the destination module, we write

@NgModule({
  declarations: [SecondPage, Example2ndComponent, Example3rdComponent],
  imports: [
    IonicPageModule.forChild(SecondPage),
    TranslateModule.forChild(),
    FirstPageModule,
  ],
  exports: [SecondPage],
})
export class SecondPageModule {}

to import the FirstPageModule to use use the exported components from the source module.

Conclusion

To use component from another module with Angular, we export the module from the source module.

And then we import the exported module from the destination module.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *