Can't use components

Ionic Framework
1

Hello! I have created a component, but can’t use it. If i add the component in the AppModule declarations, entryComponents and exports i receive an error: Template parse errors: Can't bind to 'composition' since it isn't a known property of 'app-composition-item'.. Then i tried to import the AppModule in the pages module and receive: Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.. But if i add it to page module declarations it works, but i can declarate component only once, so i can’t use it in another pages.
Here the how i tried to use it.
In the page i want to use component:

<div *ngFor="let favorite of favorites">
    <app-composition-item [composition]="favorite.composition"></app-composition-item>
</div>

Here the component:

@Component({
  selector: 'app-composition-item',
  templateUrl: './composition-item.component.html',
  styleUrls: ['./composition-item.component.scss'],
})
export class CompositionItemComponent {

  @Input() public composition: IComposition;

  constructor() {
  }
}
2

Hey Tux,

[composition]="favorite.composition" has nothing to “bind” to as, it has no reference in the Typescript file. Its looking for a value for favourite.composition in the TS file, but there isn’t anything there.

Do you have the value somewhere else?

3

Hi!

Have you import ok components?

Create a class like AppModule for components inside your components folder. In this file, in declarations and exports you must add your new component.
Then in imports in AppModule and the page where you want yo use your component add your new class (the class that is like AppModule).

1 Like
4

Hello! The value is binded to the component using @Input statement. There is no problem if i import a component inside page module (not in AppModule)

5

Hi tux,

Maybe you need more quotation marks like this [composition]="‘favorite.composition’"

6

I find Angular’s lazy loading a galactic PITA, so I generally avoid it. One option you have is to follow that path and just throw everything in the app module and never worry about any of this irritating trivia again.

However, to get this working with lazily loaded pages, you need to go all in on it. Declare a separate module for CompositionItemComponent (and any friends it always needs). Here’s an example that works for me:


@Component({
    selector: "compo",
    template: "<div>hello {{world}}</div>",
})
export class CompoComponent {
    @Input() world: string;
}

@NgModule({
    declarations: [CompoComponent],
    exports: [CompoComponent],
})
export class CompoComponentModule {}

Add CompoComponentModule to the imports stanza of the module of whatever page is trying to incorporate this component: in this example, that’s HomeModule of a blank ionic scratch project, and add to home.page.ts: <compo world="mars"> and you should see no errors and “hello mars” in the rendered page.

1 Like
7

Thanks for the answers. Problem solved using separate module.