So you want to add another input, that is relatively easy as well. We just add a property to our HTML element like so:

<div [highlight]="orange" defaultColor="yellow">

And in the code we type:

@Directive({})
export class HighlightDirective {
  @Input() defaultColor
  constructor() {
    this.background(this.defaultColor);
  }
  // the rest omitted for brevity
}

We notice, however, that we have no color until we do our first mousenter + mouseleave and the reason for that is that the constructor runs before our defaultColor property has been set. To fix that, we need to set up the input a bit differently. We need to use a property instead like so:

private defaultColor: string;

@Input()
set defaultColor(value) { 
  this.defaultColor = value;
  this.background(value);  
}

get defaultColor(){ return this.defaultColor; }

To recap this section on using input, it is clear that we can use the @Input decorator for both one as well as several inputs. The first input, however, should refer to the selector name of the directive and the second is the name of the attribute you give it.