How to make a directive or equivalent?

Ionic Framework ionic-v3
13

I’ve followed some of the code from the above replies to create a component. The component is being inserted into the page but the problem is that ion specific directives aren’t loaded.

home.html:

<ion-content padding>

  <advanced-card></advanced-card>

  <!-- Contents below are identical to whats in advanced-card -->
  <ion-card>
    <ion-item>
      <h1>header 1</h1>
      <p>paragraph 1</p>
    </ion-item>
  </ion-card>

</ion-content>

home.ts

import {Page, NavController} from 'ionic-framework/ionic';
import {AdvancedCard} from '../advanced-card/advanced-card';

@Page({
  templateUrl: 'build/pages/home/home.html',
  directives: [AdvancedCard]
})
export class HomePage {
  constructor(nav: NavController) {
    this.nav = nav;
  }
}

advanced-card.html:

<ion-card>
  <ion-item>
    <h1>header 1</h1>
    <p>paragraph 1</p>
  </ion-item>
</ion-card>

advanced-card.ts:

import {Component} from 'angular2/core';

@Component({
  selector: 'advanced-card',
  templateUrl: 'build/pages/advanced-card/advanced-card.html'
})
export class AdvancedCard {
  constructor(){
  }
}

So home.html is showing the same ion-card twice - once from a component (advanced-card) and the second time the html is directly in home.html. But the ion-card thats inside advanced-card does not load any ion directives. For example the ion-item should have a class called item but that doesn’t exist in the ion-item thats in advanced card.

How can my custom component load in and render ion directives?

Thanks

1 Like