[Angular Directive] Combine HostBinding with Services in Angular 2 Directives

You can change behaviors of element and

@Component

properties based on services using

@HostBinding

in

@Directives

. This allows you to build

@Directive

s which rely on services to change behavior without the

@Component

ever needing to know that the Service even exists.

import {Directive, HostBinding} from '@angular/core';
import {OnlineService} from "../services/online.service";

@Directive({
selector: '[online]'
})
export class OnlineDirective {

constructor(private onlineService: OnlineService) { }

@HostBinding('style.color') get styleColor () {
return !this.onlineService.online ? 'red': 'unset';
}
@HostBinding('disabled') get disabled() {
return !this.onlineService.online;
}
}

import {Directive, HostBinding} from '@angular/core';
import {OnlineService} from "../services/online.service";

@Directive({
selector: '[online]'
})
export class OnlineDirective {

constructor(private onlineService: OnlineService) { }

@HostBinding('style.color') get styleColor () {
return !this.onlineService.online ? 'red': 'unset';
}
@HostBinding('disabled') get disabled() {
return !this.onlineService.online;
}
}

<button online>One</button>