javascript / intermediate
Snippet
Dynamische Attributbindung mit HostBinding
HostBinding ermöglicht es, eine Eigenschaft einer Komponente oder Direktive direkt an ein Attribut, eine Klasse oder einen Stil des Host-Elements zu binden. In Kombination mit HostListener ermöglicht dies interaktive UI-Logik ohne manuelle DOM-Manipulation.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
@Directive({ selector: '[appHighlight]' })export class HighlightDirective {@HostBinding('style.backgroundColor') bgColor = 'transparent';@HostListener('mouseenter') onEnter() {this.bgColor = 'yellow';}@HostListener('mouseleave') onLeave() {this.bgColor = 'transparent';}}
angular
Erklärung
1
@HostBinding('style.backgroundColor')
Bindet die Eigenschaft 'bgColor' an den CSS-Stil 'background-color' des Host-Elements.
2
@HostListener('mouseenter')
Horcht auf das 'mouseenter'-Event des Hosts und löst die folgende Methode aus.