CODEWITHSUNDEEP
angularionic3
Vik
Vik

Reputation: 9289

ionic 3 angular including a component into another

So i created a component nanme 'fa-lov' which looks like below in components.module.ts

@NgModule({
    declarations: [
      FaLovComponent
    ],
    imports: [
      IonicModule
    ],
    exports: [
      FaLovComponent
    ]
})
export class ComponentsModule {}

I had an earlier popover page which looks like below in app.modules.ts import { EditOptyPopoverComponent } from '../components/edit-opty-popover/edit-opty-popover'

@NgModule({
  declarations: [
    MyApp,
    ListPage,
    EditOptyPopoverComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    EditOptyPopoverComponent,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

The EditOptyPopover.html includes the component as <fa-lov [data]="somedata"></fa-lov>

However, this fails with error: 

Unhandled Promise rejection: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'fa-lov'.
1. If 'fa-lov' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'fa-lov' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress t

Upvotes: 0

Views: 660

Answers (1)

Sonicd300
Sonicd300

Reputation: 2049

Add your ComponentsModule to the imports in your app.module.ts

@NgModule({
  declarations: [
    MyApp,
    ListPage,
    EditOptyPopoverComponent,
  ],
  imports: [
    BrowserModule,
    ComponentsModule, //<-- note this import here
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    EditOptyPopoverComponent,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Upvotes: 1

Related Questions