Creating a basic directive is simple:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-ponent',
    template: '<div>Hello!</div>'
})
export class MyComponent {
    constructor() {

    }
}

This works as expected. However, if I want to use Ionic ponents in my directive things blow up.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-ponent',
    template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
    constructor() {

    }
}

The directive is rendered, but Ionic ponents are not transformed, and so wont look/work properly.

I can't find any examples on this. How should I do this?

Creating a basic directive is simple:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-ponent',
    template: '<div>Hello!</div>'
})
export class MyComponent {
    constructor() {

    }
}

This works as expected. However, if I want to use Ionic ponents in my directive things blow up.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-ponent',
    template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
    constructor() {

    }
}

The directive is rendered, but Ionic ponents are not transformed, and so wont look/work properly.

I can't find any examples on this. How should I do this?

• javascript
• ionic2

• If you feel the question is lacking somehow, please leave a ment instead of just downvoting. – Schlaus Commented Jan 24, 2016 at 13:31
• I'm not sure why you got down voted. Excellent question and was exactly what I needed. +1 – Josh McKearin Commented Feb 4, 2016 at 23:34

1 Answer 1

Found the answer here:

You have to import the Ionic ponents and register them as 'directives'

So my second example bees:

import {Component} from 'angular2/core';
import {List, Item} from 'ionic/ionic';

@Component({
    selector: 'my-ponent',
    directives: [List, Item],
    template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
    constructor() {

    }
}