Component inside component

Ionic Native
1

I have the following project structure

src
  app
    ...
  components
    category-container
      category-container.component.ts
      category-container.component.html
      category-container.component.scss
      category-container.module.ts
    adviser-card
      adviser-card.component.ts
      adviser-card.component.html
      adviser-card.component.scss
      adviser-card.module.ts
  pages
    home
      home.component.ts
      home.component.html
      home.component.scss
      home.module.ts

home.component.html:

<!---->
<ion-content padding>
  <category-container></category-container>
</ion-content>

home.module.ts:

import { CategoryContainerModule } from "../../components/category-container/category-container.module";
...
  imports: [
    ...
    CategoryContainerModule
  ]

What I want to do is inside category-container show a list of adviser-card's:

<!---->
<ion-content padding>
  <section class="main">
     <adviser-card *ngFor="let adviser of advisers" [adviser]="adviser" mode="'score'"></adviser-card>
  </section>
</ion-content>

adviser-card.module.ts:

import { NgModule } from '@angular/core';
import { AdviserCardComponent } from './adviser-card';

@NgModule({
    declarations: [ AdviserCardComponent ],
    imports: [],
    exports: [ AdviserCardComponent ]
})
export class AdviserCardModule { }

and category-container.module.ts:

import { NgModule } from '@angular/core';
import { CategoryContainerComponent } from './category-container';
import { AdviserCardModule } from "../adviser-card/adviser-card.module";

@NgModule({
    declarations: [ CategoryContainerComponent ],
    imports: [ AdviserCardModule ],
    exports: [ CategoryContainerComponent ]
})
export class CategoryContainerModule { }

When I run with ionic serve i get the next error:

Runtime Error
Uncaught (in promise): Error: Template parse errors: 'ion-icon' is not a known element: 1. If 'ion-icon' is an Angular component, then verify that it is part of this module.

ion-icon is on adviser template:

<!-- Static data -->
<div class="footer">
  <div class="score" *ngIf="mode === 'score'">
    <div><ion-icon name="star"></ion-icon> 4.3</div>
    <div>4.5 <ion-icon name="star"></ion-icon></div>
  </div>
  <div class="career" *ngIf="mode === 'career'">
    <span>Ing. en Sistemas Computacionales</span>
  </div>
</div>

Have I to import some module inside adviser module to use ion-icon?

2

I just imported IonicModule inside adviser card module:

import { NgModule } from '@angular/core';
import { AdviserCardComponent } from './adviser-card';
import { IonicModule } from "ionic-angular";

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

Is it the right way to achieve that?
Importing a module create a new instance or is just a reference?
I’m confused a lot.

HomePage is lazy loaded.
Inside HomePage there’re several category-container.
Each category-container has several adviser-card.

If adviser-card is inside category-container, and category-container inside HomePage →

HomePage
__category-container
____adviser-card

adviser-card can’t see modules imported on HomePage?

1 Like
3

If you want your subcomponent to be smart, and to react to changes to its inputs, one way to accomplish this is to use set/get and a BehaviorSubject.

Input()
  set nameOfInput(value) {
  this.currentInputValue.next(value);
}
  get nameOfInput() {
  return this.currentInputValue.getValue();
}

where this.currentInputValue is a BehaviorSubject.

4

Yes, that’s the best idea.