Style gone if using ionic ui components inside the custom component

Ionic Framework ionic-v3
1

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.

accordion.ts

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

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

  text: string;

  constructor() {
  }

}

accordion.html

<ion-item>
  {{ title }}
</ion-item>
<ion-item text-wrap>
  <ng-content></ng-content>
</ion-item>

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

<ion-list>
   <ng-template ngFor [ngForOf]="getBooks()" let-book>
      <cif-accordion
        [title]="book.name">

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

      </cif-accordion>
  </ng-template>
</ion-list>

components.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AccordionComponent } from './accordion/accordion';
@NgModule({
	declarations: [AccordionComponent],
	imports: [],
	exports: [AccordionComponent],
	schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
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?

2

Can you post a screen shot ?

Do you have an ‘accordion.scss’ ?

3

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

4

Try adding your ‘component’ to a skeleton project:

ionic start myApp --no-cordova blank

And see: https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/

5

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