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.