title: In Ionic 2, how do I create a custom directive that uses Ionic components?
body: <p>Creating a basic directive is simple:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
      selector: 'my-component',
      template: '&lt;div&gt;Hello!&lt;/div&gt;'
  })
  export class MyComponent {
      constructor() {
  
      }
  }
  </code></pre>
  
  <p>This works as expected. However, if I want to use Ionic components in my directive things blow up.</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
      selector: 'my-component',
      template: '&lt;ion-list&gt;&lt;ion-item&gt;I am an item&lt;/ion-item&gt;&lt;/ion-list&gt;'
  })
  export class MyComponent {
      constructor() {
  
      }
  }
  </code></pre>
  
  <p>The directive is rendered, but Ionic components are not transformed, and so wont look/work properly.</p>
  
  <p>I can't find any examples on this. How should I do this?</p>