Style gone if using ionic ui components inside the custom component


Hi, I made a custom component and using the ionic ui components inside it. It renders but the styles are gone. Here’s my accordion custom component.


import { Component, Input } from '@angular/core';

  selector: 'accordion',
  templateUrl: 'accordion.html'
export class AccordionComponent {
  @Input('title') title: string;

  text: string;

  constructor() {



  {{ title }}
<ion-item text-wrap>

and in my page, I’m using it like this.

   <ng-template ngFor [ngForOf]="getBooks()" let-book>

        <button ion-button clear *ngFor="let c of book.chapters">
          {{ c }}



import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AccordionComponent } from './accordion/accordion';
	declarations: [AccordionComponent],
	imports: [],
	exports: [AccordionComponent],
export class ComponentsModule {}

and this components module is added to the app.module.ts.

but seems the ion-item styles are not applied at all. any tips?


Can you post a screen shot ?

Do you have an ‘accordion.scss’ ?


I don’t have a screenshot, but those styles for <ion-item> seems not applied inside the custom components.


Try adding your ‘component’ to a skeleton project:

ionic start myApp --no-cordova blank

And see:


Found solution. people already had this problem: find the answer here -> [RC0] How to use Ionic components inside custom components/directives