[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 @Directives 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>