Ionic component styles not applied inside custom components

Ionic Framework ionic-v3
1

I am using the latest version of ionic (CLI 3.19.0) and started a blank project. I added a lazy loaded home page and then created a custom component called <custom-item>. I can get it to load fine by adding schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to my app.module.ts but if I use Ionic components inside this custom component, the ionic styles do not get applied.

My home page contains:

<ion-content padding>
  <button ion-button color="primary">Button outside of component</button>
  <custom-item></custom-item>
</ion-content>

this first button displays fine with the Ionic styles.
Inside the <custom-item> I have:

<div>
  <button ion-button color="primary">Button inside of component</button>
</div>

…so these two buttons should be identical. In my case, the button inside my custom component just shows up as a small grey button. Anyone had this problem before?

2

See:

3

Thanks for pointing me in the right direction Rob. Here’s the short version of the solution:
(Remember that this is to apply Ionic styles inside custom components who are lazy loaded)

You need to import IonicModule in your share components.module.ts

Here is copy of a cleaned up copy of my components.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { EventRowComponent } from './event-row/event-row';
import { IonicModule } from "ionic-angular";

@NgModule({
  declarations: [ EventRowComponent ],
  imports:      [ IonicModule ],
  exports:      [ TranslateModule, EventRowComponent ],
  schemas:      [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class ComponentsModule {}

You need to add CUSTOM_ELEMENTS_SCHEMA to be able to use custom components. To be able to apply ionic styles inside your custom components, you need to import IonicModule.

3 Likes
4

You need to import your custom module into app.module.ts like below and it worked for me.

imports: [
BrowserModule,
HttpModule,
ComponentsModule,
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages: true,
}),
],

5

I discovered a strange behavior. If I use this code

<button ion-button color="primary">Button inside of component</button>

the button is little and white. Instead if I use this code:

<ion-button color="primary">Button inside of component</ion-button>

it’s styled correctly.

Somebody can explain me why?
Thanks a lot.
Roberto

1 Like
6

So i think one syntax is ionic 3 and below and the other is ionic 4, you must be using ionic 4 where this change came in

<ion-button>

Replaced this

<button ion-button>