Directive is not showing HTML

Hello,

I’ve a WrittenHoursPage and I want to create a directive for a calendar I’m going to created. For now I want that in the comes <p>test</p> but it is not showing that.

Can someone see what I’m doing wrong?

import {Page} from 'ionic/ionic';
import {WrittenHoursCalendar} from './calendar-plugin/calendar.directive'

@Page({
    templateUrl: 'build/pages/written-hours/written-hours.html',
    directives: WrittenHoursCalendar
})

export class WrittenHoursPage {
    constructor() {

    }

}

import {Directive} from 'angular2/core';

@Directive({
    selector: 'calendar',
    templateUrl: './calendar.html'
})

class WrittenHoursCalendar {
    constructor(){

    }
}

We are having the same issue:

import {Directive} from 'angular2/core';

/*
  Generated class for the Timebar directive.

  See https://angular.io/docs/ts/latest/api/core/DirectiveMetadata-class.html
  for more info on Angular 2 Directives.
*/
@Directive({
  selector: 'timebar', //element selector <div timebar></timebar>
  templateUrl: 'build/components/timebar/timebar.html'
})
export class Timebar {
  constructor() {
    console.log('Hello World');

  }
}

Directives are not used with templates in Angular 2. You need to use a Component. A good SO on this:

A more in depth post on this:

1 Like

What brandyshea says plus directives provider is an array

1 Like

This was definitely my issue. Thanks