Direktive – Nutze die Macht der Template-Befehle (Folge 6)

In dieser Happy Angular Podcast Folge schauen wir uns Direktiven an. Eine Direktive sind Befehle, die das Aussehen des Templates anpassen. Angewendet kann eine Direktive auf ein HTML Element oder einer Komponente. In Angular gibt es drei verschiedene Arten von Direktiven: Attribute Direktive, strukturelle Direktive und eine Komponente. Neben den Standard-Angular Direktiven können wir auch eigene Direktiven schreiben.

Drei verschiedene Arten von Direktiven

• Strukturelle Direktive – Struktur-Anpassungen des DOM-Baums

• Attribute Direktiven – Änderung der Attribute eines DOM Elements oder Komponente

• Komponente – Grundbaustein einer Angular Anwendung (siehe Folge 3)

Standarddirektiven

Listen mit *ngFor

<li *ngFor="let item of [1, 2, 3]">
  {{ item }}
</li>

Fallunterscheidungen *ngIf

<div *ngIf="true">True</div>
<div *ngIf="false">False</div>

Styles verändern mit ngStyle

<div [ngStyle]="{ 'color': 'red' }"> Beispiel für ngStyle </div>

Stern Syntax

Die Stern Syntax ist eine abkürzende Schreibweise in Angular. Die zwei folgende Programmcodes zeigen die Kurz- und die Langform.

Kurzform

<div *ngIf="person" class="name">{{person.name}}</div>

Langform

<ng-template [ngIf]="person">
  <div class="name">{{person.name}}</div>
</ng-template>

Eigene Direktiven schreiben

Neben den Standarddirektiven können wir auch eigene Direktiven schreiben. Dazu verwenden wir den Decorator @Directive. Ob es sich um eine Strukturelle oder Attribute Direktive handelt, definieren wir im Constructor. Die Attribute Direktive hat die Referenz auf das Element, auf welchem diese angewendet werden soll. Die Strukturelle Direktive hat die Referenz auf das Template, auf dem die Direktive angewendet wird, und auf den Container, in welchem das Template liegt.

Strukturelle Direktive

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

Attribute Direktive

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

In der Podcast-Folge schauen wir uns außerdem noch an, wie wir Konfigurationen von Direktiven anbieten können.