GEDOPLAN
Webprogrammierung

Angular Directive, Hostbinding

Webprogrammierung

Directive sind neben Komponenten eines der zentralen Konzepte in Angular. Anders als Components bringt eine Directive kein eigenes Template mit, sondern erweitert die eigene Anwendung um Funktionalität.

Bevor wir zum eigentlich Hostbinding kommen, werfen wir noch mal einen Blick auf die Grundlagen einer Direktive:

Verwendung:

<div gedLoremIpsumContent>

Implementierung:

@Directive({
  selector: '[gedLoremIpsumContent]',
})
export class LoremIpsumContentDirective {}

Syntaktisch unterscheidet sich eine Direktive kaum von einer Component, analog müssen wir auch hier einen Selektor verwenden mit dessen Hilfe wir unsere Directive später im Template vewenden können. In diesem Fall haben wir uns für einen Attributs-Selector entschieden. Alternativ hätten wir hier auch auf einen Tag-Selector (“gedLoremIpsumContent”) oder einen CSS-Selector (“.gedLoremIpsumContent”) setzen können.

Das oben gezeigte Beispiel funktioniert, ohne sichtbaren nutzen, tadellos und erzeugt für das DIV das unsere Directive verwendet auch eine entsprechende Objektinstanz. Innerhalb unserer Direktive können wir nun Einfluss auf das DOM-Element nehmen auf dem unsere Direktive verwendet wird (der so genannten “Host”). Hierzu stehen uns 4 Möglichkeiten zur Verfügung.

ElementRef

Die Klasse “ElementRef” bietet uns eine entsprechende Schnittstelle an um auf das zugrunde liegende HTML-Element zugreifen zu können. Nach der Injektion über den Konstruktor liefert die so erhaltene Instanz mittels der Methode “nativeElement” den Zugriff auf die DOM-API. Hierüber sind wir nun in der Lage die gewünschten Manipulationen am Element vorzunehmen.

  constructor(element: ElementRef) {
    element.nativeElement.style.cursor = 'pointer';
  }

Der direkte Zugriff auf die DOM API sollte jedoch nur im äußersten Notfall verwendet werden. Angular ist so konzipiert das der Browser nur eines der möglichen Anzeige-Medien ist. Hier sind auch native Clients, mobile Geräte und serverseitiges Rendering möglich, die keinen zugrundeliegenden DOM-Baum haben und auch lässt sich eine Direktive die sich direkt auf das native Element stützt nicht per Unit-Tests testen.

Renderer

Der Renderer ist im Grunde eine Abstraktion für den direkten Zugriff auf die DOM-API und sollte immer vorrangig, vor der direkten Verwendung des “nativeElement” , verwendet werden. Diese Klasse bietet diverse Methoden an um das zugrunde liegende DOM-Element zu manipulieren.

  constructor(element: ElementRef, renderer:Renderer2) {
    renderer.setStyle(element.nativeElement, "border", "1px solid black");
  }

Render2-API

HostBinding

Das HostBinding bietet uns die Möglichkeit das Attribut von unserem Host (in diesem Beispiel dem DIV-Element) direkt an eine eine Property zu binden, ohne das wir uns im weiteren Programm-Verlaufen darum kümmern müssen das Änderungen des Wertes auch am DOM-Elemente aktualisiert werden.

  @HostBinding('innerHTML')
  innerHTML: string;

  ngOnChanges() {
   this.innerHTML = 'Hello World';
  }

Alternativ zur (empfohlenen) Verwendung des @HostBinding Decorators kann das Binding auch bei der Deklaration der Directive gesetzt werden:

@Directive({
  selector: '[gedLoremIpsumContent]',
  exportAs: 'loremIpsumContent',
  host: {
    'class': 'demo',
    '(mouseenter)': 'mouseEnter()'
  }
})

HostListener

HostListener bieten uns analog zum HostBinding Zugriff auf Events die auf dem Host auftreten können. Dazu verwendenden wir den  @HostListener-Decorator an eine unserer Methoden und legen fest welches Event verarbeitet werden  und welche Parameter übergeben werden sollen

  @HostListener('click', ['$event'])
  onHostClick($event) {
   this.innerHTML="New Value";
  }

Mit diesen Möglichkeiten bietet Angular alles um sicher und einfach direkt oder indirekt mit den Elementen des DOM-Baumes zu arbeiten. Das Ganze als Live-Beispiel gibt es wie immer in

Github: https://github.com/GEDOPLAN/angular-directive

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

IT-Training - GEDOPLAN
Spring

Spring Boot + DATA JPA + HATEOAS

Spring Boot bietet die Möglichkeit auf sehr einfachem Wege standalone Anwendungen zu schreiben, die keinerlei Applicationserver als Laufzeitumgebung benötigen. Als…
2021 02 09 12 45 23 neues dokument 1 inkscape
Webprogrammierung

Angular E2E mit json-server

Ein E2E-Test dient dazu eine Anwendung “von Vorne bis Hinten” durchzutesten. Dabei sind viele Hürden zu meistern, angefangen von erreichbarer…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!