Using Ionic 2 UI Element in custom Angular 2 Components


I have a very simple typescript tab application, and on its first page I have another component that I’ve created.


In that other component I have a list of items that I get from some service. In the component’s html I use ion-list,

    <ion-item *ngFor="#item of items">

When I render the app, the list looks completely different, compared to when the list is on one of the main pages. Do I need to import ion-list somehow into that component, and declare it as a directive? I tried that a little but couldn’t find the place where ion-list is exported from.


You’ll need to import the Ionic directives in your components:

import {IONIC_DIRECTIVES} from 'ionic-angular';

Great! Once I’ve added the import, and declared the IONIC_DIRECTIVES in the component’s directives, the list looks as expected.

import {IONIC_DIRECTIVES} from 'ionic-angular';

    // ...
    directives: [IONIC_DIRECTIVES]

Thanks so much Josh!