Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using component from another module (Angular)

Tags:

angular

I want to call one component from another module. The component calls other component which have its own module which also calling component from TemplateComponent, the one that will import the component.

Component To Be Called

templates: <app-sub [schema]="schema"></app-sub>

First Module

@NgModule({
declarations: [
    ComponentToBeCalled,

],
exports: [
    ComponentToBeCalled
  ]
})
export class FirstModule { }

Template Component

@NgModule({
  imports: [
   FirstModule
   ],
  providers: [],
  exports:[ FirstModule ] 
})
export class TemplateComponent{}

But it doesn't work. Any workaround?

like image 353
myelxx Avatar asked Oct 16 '25 03:10

myelxx


1 Answers

To use a component in another module these are the steps involvded:

Step 1: First export the component from the module where the component belongs to so that it can be imported in other modules

first.module.ts

@NgModule({
declarations: [
    ComponentToBeCalled,

],
exports: [
    ComponentToBeCalled
  ]
})
export class FirstModule { }

Step 2 : You need to import the FirstModule in the module where the component has to be used ( In your case the module which contain TemplateComponent)

@NgModule({
declarations: [
    TemplateComponent,

],
imports: [
    FirstModule
  ]
})
export class SecondModule { }

Note : IF you have components that has to be shared between multiple modules create a shared module where these the components are defined and exported.

shared.module.ts

@NgModule({
declarations: [
    AlertComponent,
],
providers:[
   AlertService // services
],
exports: [
    AlertComponent // export the components you want
  ]
})
export class SharedModule { }

And you have to do is import these module into the all other modules you want to use shared component

like image 111
Joel Joseph Avatar answered Oct 18 '25 22:10

Joel Joseph



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!