CODEWITHSUNDEEP
angular
myelxx
myelxx

Reputation: 402

Using component from another module (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?

Upvotes: 4

Views: 9749

Answers (1)

Joel Joseph
Joel Joseph

Reputation: 6169

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

Upvotes: 6

Related Questions