Angular Component part of two declarations

Question

I created a small component which I want to use in some of the pages but I seem to have some problems when including it in more than one lazy load page.

add.button.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'add-button',
  template: `
  <ion-buttons end>
    <button ion-button icon-only (click)="navToAdd()">
      <ion-icon name="md-add-circle"></ion-icon>
    </button>
  </ion-buttons>`
})

export class AddButton {
  visible: boolean = true;

  @Output() navigate: EventEmitter<any> = new EventEmitter();

  navToAdd() {
    this.navigate.emit(null)
  }
}

app.modules.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    TabsPage
  ],
  providers: [
    ...
  ]
})
export class AppModule { }

users.module.ts - Just like users.module.ts there are other page modules where I want to use the component just like i use it in users.module.ts below

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
import { AddButton } from '../../components/add-button.component';

@NgModule({
  declarations: [
    UsersPage,
    AddButton
  ],
  imports: [
    IonicPageModule.forChild(UsersPage),
  ],
})
export class UsersPageModule { }

I would create a Common-Module for those Components and include the Module in both other modules — enno.void
– enno.void, Commented Nov 21, 2018 at 13:00

BrunoLM · Accepted Answer · 2018-11-21 13:03:00Z

2

Your AddButton should probably be on a Shared module and then you would be able to use it in multiple places by importing the module

answered Nov 21, 2018 at 13:03

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ciprian Over a year ago

Ok ... Seems simple enough to create a shared module. I don't know where to include it. Do I include the shared module in all page modules? Like users.module.ts, events.module.ts? What should users.module.ts look like?

Artyom Amiryan · Accepted Answer · 2018-11-21 13:03:27Z

1

add your AddButton component into exports array of users.module.ts so you can use it in other modules where UsersModule is imported

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
import { AddButton } from '../../components/add-button.component';

@NgModule({
  declarations: [
    UsersPage,
    AddButton
  ],
  imports: [
    IonicPageModule.forChild(UsersPage),
  ],
  exports: [
    AddButton
  ]
})
export class UsersPageModule { }

answered Nov 21, 2018 at 13:03

Artyom Amiryan

2,9961 gold badge16 silver badges25 bronze badges

Comments

Octavio Garbarino · Accepted Answer · 2018-11-21 13:07:54Z

0

If you create the component with the ionic cli with ionic g component AddButton it will automatically create a ComponentsModule and your new component in that module.

And to use this component in the other modules you just have to import that module in the modules that you need.

Also in your ComponentModule you should add imports: [IonicModule] in order to be able to use the Ionic Components like ion-buttons

answered Nov 21, 2018 at 13:07

Octavio Garbarino

7827 silver badges16 bronze badges

Comments

nircraft · Accepted Answer · 2018-11-21 13:33:48Z

0

If you think ButtonComponent doesn't fit to be in Shared Module, Make a Individual module for AddButton. Now this new module should declare and export the AddButtonComponent. You should import this new module in whichever child module you want it to be used for. This should not cause any problem. This will also save you from loading all Shared component just for sake of getting AddComponent working.

It's a best practice to create another module for the component if it is being used at multiple places/modules.

answered Nov 21, 2018 at 13:33

nircraft

8,5085 gold badges33 silver badges46 bronze badges

Collectives™ on Stack Overflow

Angular Component part of two declarations

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related