How to use ionic components inside angular components

Question

Problem

In an ionic app, i am using two custom angular components. In one of the angular component, i want to use two ionic components, <ion-icon> and <ion-fab> but ionic is throwing two errors

ion-icon is not a known element

and

ion-fab is not a known element

Question

How can i use ionic components inside custom angular components?

Here's the component which in which i am using ionic components

footer.html

<div class="footer-container">
  <div class="comics-option-container">
    <img class="comics-icon" src="../../assets/imgs/grid2.png" />
    <p>Comics</p>
  </div>

  <div class="search-option-container">
    <ion-fab class="search-fab-btn-container">
      <button ion-fab class="search-btn">
          <ion-icon name="ios-search" color="white"></ion-icon>
      </button>
    </ion-fab>

    <p>Search</p>
  </div>

  <div class="edit-option-container">
    <img class="posting-icon" src="../../assets/imgs/edit1.png" />
    <p>Posting</p>
  </div>
</div>

components.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header';
import { IonicModule } from 'ionic-angular';
import { FooterComponent } from './footer/footer';
import { CommonModule } from '@angular/common';
@NgModule({
    declarations: [HeaderComponent, FooterComponent],
    imports: [IonicModule],
    exports: [HeaderComponent, FooterComponent]
})
export class ComponentsModule {}

HeaderTestPage is the page in which i am using this component, below is its module file

headertest.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule, IonicModule } from 'ionic-angular';
import { HeaderComponent } from '../../components/header/header';
import { FooterComponent } from '../../components/footer/footer';
import { SharedModule } from '../../shared.module';
import { HeaderTestPage } from './headertest';

@NgModule({
  declarations: [
    HeaderTestPage
  ],
  imports: [
    IonicPageModule.forChild(HeaderTestPage),
    SharedModule
  ],
})

export class HeaderTestPageModule {}

yanis labrak · Accepted Answer · 2019-07-24 18:57:24Z

1

I got the same problem as you had and I find the way to solving it and helping everybody else who have the same issue.

You need to import IonicModule and CommonModule in components.module.ts to solve the problem.

@NgModule({
 imports: [
  CommonModule,
  IonicModule
 ],
 ...
})

I finded the solution thanks to the comment of Wils on the thread "Ionic 3 can't use ion- components inside my custom components"

answered Jul 24, 2019 at 18:57

yanis labrak

912 silver badges3 bronze badges

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

Collectives™ on Stack Overflow

How to use ionic components inside angular components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related