Let's take this new found knowledge on directives and build a directive that indicates that a field is erroneous. We take erroneous to mean we color elements and display an error text:

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({
  selector: '[error]'
})
export class ErrorDirective {
  error:boolean;
  private nativeElement;
  @Input errorText: string;
  @Input()
  set error(value: string) {
    let val = value === 'true' ? true : false;
    if(val){ this.setError(); }
    else { this.reset(); }
  }

 constructor(
   private elementRef: ElementRef, 
   private renderer: Renderer2
 ) {
   this.nativeElement = elementRef.nativeElement;
 }

 private reset() { 
   this.renderer.setProperty(nativeElement, 'innerHTML', '');
   this.renderer.setProperty(nativeElement, 'background', '') 
 }

 private setError(){
   this.renderer.setProperty(nativeElement, 'innerHTML', this.errorText);
   this.renderer.setProperty(nativeElement, 'background', 'red');
 }
}

And to use it we just type:

<div error="{{hasError}}" errorText="display this error">