Cacher is the code snippet organizer for pro developers

import { Component } from '@angular/core';
import {MyDirective} from './my-directive.directive'

@Component({
  moduleId: module.id,
  selector: 'test6-app',
  templateUrl: 'test6.component.html',
  styleUrls: ['test6.component.css'],
  directives:[MyDirective]
})
export class Test6AppComponent {
  title = 'test6 works!';
  isFavorite = true;
}

<h1 [MyDirective]="isFavorite">
  {{title}}
</h1>

.is-favorite{
  color:red;
}

import { Directive, HostBinding, Input } from '@angular/core';

@Directive({
  selector: '[MyDirective]'
})
export class MyDirective {
  @HostBinding('class.is-favorite') isFavorite = true;

  @Input()
  set MyDirective(value){
  		this.isFavorite = value;
  }
  constructor() {}
}