0

I create a custom component called bookmark where I'm just showing my bookmark icon.

bookmark.html

<button ion-fab class="bookmark-button">
  <ion-icon *ngIf="!flag; else elseBlocked" ios="ios-bookmark" md="md-bookmark" [ngStyle]="{'color': '#9F9F9F'}" class="bookmark-icon"></ion-icon>
  <ng-template #elseBlocked><ion-icon ios="ios-bookmark" md="md-bookmark" class="bookmark-icon" [ngStyle]="{'color': '#FF6260'}"></ion-icon></ng-template> 
</button>

bookmark.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { BookmarkComponent } from './bookmark';

@NgModule({
  declarations: [
      BookmarkComponent
  ],
  exports: [
    BookmarkComponent,
  ],
  imports: [
    IonicModule.forRoot(BookmarkComponent),
  ],
})
export class BookmarkComponentModule {}

Now when I'm importing this component module in ionic pages sometimes it doesn't show the bookmark icon. Like in Homepage it's working just fine but when I'm importing in some other module like Resultpage then it doesn't work at all.

home.module.ts

import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { HomePage } from "./home";
import { BookmarkComponentModule } from "../../components/bookmark/bookmark.module";

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    BookmarkComponentModule,
  ],
})
export class HomePageModule {}

result.module.ts

import { BookmarkComponentModule } from './../../components/bookmark/bookmark.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ResultPage } from './result';

@NgModule({
  declarations: [
    ResultPage,
  ],
  imports: [
    IonicPageModule.forChild(ResultPage),
    BookmarkComponentModule
  ],
})
export class ResultPageModule {}

I don't know where I go wrong. Any suggestions...

7
  • any error on console? posr your component where you use Jun 16, 2018 at 7:13
  • No, It doesn't throw any error. I've checked in inspect element and the icon is there but doesn't show but if I doesn't import the bookmark component in Resultpage then the icons works just fine.
    – Ankur
    Jun 16, 2018 at 7:28
  • that cannot happen, produce a stackblitz Jun 16, 2018 at 7:29
  • why are you using IonicModule.forRoot(BookmarkComponent), ?
    – Suraj Rao
    Jun 16, 2018 at 7:39
  • I'm using this so that I can use ionic icons in my component
    – Ankur
    Jun 16, 2018 at 8:49

1 Answer 1

0

Thank you guys for your quick responses but I seemed to resolve this issue by changing the import statement on the component page.

bookmark.module.ts

before

imports: [
    IonicModule.forRoot(BookmarkComponent),
    BookmarkComponentModule
],

after

imports: [
    IonicModule,
    BookmarkComponentModule
],

When I change my import statement on every component I've been using the problem seems to be gone.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.