I am facing an issue while trying to utilize a service as a provider for general use in a Directive rather than a Component. The problem arises when the service is not being received in the child Directive, despite my expectation to use it within the directive:
// CurrentTimeService.ts
import { Injectable } from '@angular/core'
@Injectable()
export class CurrentTimeService {
dt: number;
constructor() {
this.dt = new Date().getTime();
}
}
app.ts
//our root app component
import {Component} from '@angular/core'
import {CurrentTimeService} from "./CurrentTimeService"
import {SimpleDirective} from "./SimpleDirective"
@Component({
selector: 'my-app',
providers: [CurrentTimeService],
template: `
<div>
<h2 mySimpleDirective>Hello {{name}}</h2>
</div>
`,
directives: [SimpleDirective]
})
export class App {
constructor() {
this.name = 'Angular 2 (Release Candidate!)'
}
}
SimpleDirective.ts
import {Directive} from '@angular/core';
import { CurrentTimeService } from "./currentTimeService"
@Directive({
selector: '[mySimpleDirective]'
})
export class SimpleDirective {
constructor(private currentTimeService: CurrentTimeService) {
}
}
You can view the complete program on Plunker by following this link: https://plnkr.co/edit/s0zUkI?p=preview
Thank you for your help in advance.