@HostBinding(?)

• propertyName: references a property of the host with the propertyName name.
• attr.attributeName: references an attribute of the host with the attributeName name. The initial value is set to the associated directive property. Setting a value in the property updates the attribute on the corresponding HTML element. Using the null value at this level removes the attribute on the HTML element.
• style.styleName: links a directive property to a style of the HTML element.
• class.className: links a directive property to a class name of the HTML element. If the value is true, the class is added otherwise removed.

@HostListener(?)

• eventName: the name of the event to register a method callback on.

Example for all the cases:

@Directive({
  selector: 'mydir'
})
export class SomeDirective {
  @HostBinding('value') value:string;
  @HostBinding('attr.role') role:string;
  @HostBinding('style.width.px') width:number;
  @HostBinding('class.someClass') condition:boolean;
  @HostListener('input') onInput() {
    console.log('on input in directive');
  }
}