@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'); } }