Using Ionic 2 UI Element in custom Angular 2 Components

Ionic Framework ionic-v3
1

Greetings,

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

<ion-content>
  <my-component></my-component>
</ion-content>

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-list>
    <ion-item *ngFor="#item of items">
        {{item.displayName}}
    </ion-item>
</ion-list>

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.

Thanks,
Boaz

2

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

import {IONIC_DIRECTIVES} from 'ionic-angular';
3

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';

@Component({
    // ...
    directives: [IONIC_DIRECTIVES]

Thanks so much Josh!