javascript / intermediate
Snippet
HostBinding und HostListener
Diese Dekoratoren ermöglichen einer Direktive die Interaktion mit ihrem Host-Element ohne direkte DOM-Manipulation. HostBinding verknüpft eine Eigenschaft des Hosts mit einer Klassen-Eigenschaft, während HostListener Event-Listener am Host registriert.
snippet.js
javascript
1
2
3
4
5
6
7
8
@Directive({ selector: '[appActive]', standalone: true })export class ActiveDirective {@HostBinding('class.is-active') isActive = false;@HostListener('click') toggle() {this.isActive = !this.isActive;}}
angular
Erklärung
1
@HostBinding('class.is-active')
Fügt dem Host-Element dynamisch die CSS-Klasse 'is-active' hinzu oder entfernt sie.
2
@HostListener('click')
Horcht auf 'click'-Ereignisse am Host und führt die toggle-Methode aus.