CODEWITHSUNDEEP
angularangular-module
Catalin Sasu
Catalin Sasu

Reputation: 51

Use component declared in app module in another module

I have a Notification Popup declare in app module. This Notification Popup is custom so it have custom fields marked as @Inputs. I want to be able to use this component in another component that requires notification popup functionality.


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule.forChild(),
  ]
})
export class PopupNotificationModule { }

@NgModule({
  declarations: [
    AppComponent,
    PopupNotificationComponent 
  ],
  imports: [
    PopupNotificationModule
  ],

})

export class AppModule 

@NgModule({
  declarations: [
    CarListComponent,
  ],
  imports: [
  ],

})

export class CarModule { }

I tried importing and exporting but without succes.

Upvotes: 2

Views: 2330

Answers (2)

Khushboo Patel
Khushboo Patel

Reputation: 111

first you have to add PopupNotificationComponent in declarations and export section of PopupNotificationModule like that

@NgModule({
  declarations: [PopupNotificationComponent],
  imports: [
    CommonModule,
    TranslateModule.forChild(),
  ],
  exports: [PopupNotificationComponent],
})
export class PopupNotificationModule { }

then you have to import PopupNotificationModule in app module import section like that

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        PopupNotificationModule,
        CarModule 
      ],
    
    })
    
    export class AppModule

now you have import PopupNotificationModule in another module where you want to use PopupNotificationComponent

in your case it is CarModule

@NgModule({
  declarations: [
    CarListComponent,
  ],
  imports: [
    PopupNotificationModule 
  ],

})

export class CarModule { }

now you can use PopupNotificationComponent selector in CarModule components.

i hope this will work for you

Upvotes: 3

Rushi Patel
Rushi Patel

Reputation: 601

Make a separate folder which includes notification-popup component and module file make module like

@NgModule({
  declarations: [PopupNotificationComponent],
  imports: [
    CommonModule,
    TranslateModule.forChild(),
  ]
})
export class PopupNotificationModule { }

Declare PopupNotificationComponent in PopupNotificationModule and whenever you wish to use in another module just import PopupNotificationModule and that's it.

Upvotes: 0

Related Questions