CODEWITHSUNDEEP
ionic2components
Lakshin Karunaratne
Lakshin Karunaratne

Reputation: 455

In Ionic 2, version 3.0.1 how do I create a custom component that uses Ionic components?

In Ionic 2, how do I create a custom directive that uses Ionic components?

This answer doesn't work anymore.

import {IONIC_DIRECTIVES} from 'ionic-angular'

this also doesn't work. How can i create a custom component that uses Ionic components in Ionic 2, version 3.0.1?

Upvotes: 1

Views: 136

Answers (1)

DjezzzL
DjezzzL

Reputation: 845

If you stuck with this problem after using lazy loading you should do that like that:

  1. Add IonicModule to 'imports' parameter of CustomComponentModule
  2. Use ionic components in custom components' templates
  3. Add CustomComponentModule to 'imports' parameter of your AnotherComponentModule where you want use that component (CustomComponentModule).

deletable.module.ts

import { NgModule } from '@angular/core';
import { DeletableItem } from './deletable';
import { IonicModule } from 'ionic-angular';

@NgModule({
  declarations: [
    DeletableItem
  ],
  imports: [
    IonicModule
  ],
  exports: [
    DeletableItem
  ]
})
export class DeletableModule {}

bill.html 

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bill of bills" (click)="openEdit(bill)">
      <ion-label text-left>{{bill.name}}</ion-label>
      <ion-label text-right>{{bill.amount}}</ion-label>
      <deletableItem></deletableItem>
    </ion-item>
  </ion-list>
</ion-content>

bill.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BillPage } from './bill';

import { DeletableModule } from './../../components/deletable/deletable.module'

@NgModule({
  declarations: [
    BillPage
  ],
  imports: [
    IonicPageModule.forChild(BillPage),
    DeletableModule
  ],
  exports: [
    BillPage
  ]
})
export class BillModule {}

That's work for me.

Upvotes: 1

Related Questions