Criando uma diretiva: Input e Property Binding
# Criando uma diretiva: Input e Property Binding
```HTML
<p highlight [defaultColor]="'grey'" [highlightColor]="'red'">
Texto com highlight com cores customizadas.
</p>
```
```typescript
@import { Directive, HostListener, HostBinding, Input } from '@angular/core';
@Directive({
selector: '[highlight]'
})
export class HighlightDirective {
@HostListener('mouseenter') onMouseOver(){
this.backgroundColor = this.highlightColor;
}
@HostListener('mouseleave') onMouseLeave(){
this.backgroundColor = this.defaultColor;
}
@HostBinding('style.backgroundColor') background: string;
// Variáveis para cores dinâmicas
@Input() defaultColor: string = 'white';
@Input() highlightColor: string = 'yellow';
constructor() {}
}
```