Angular Structual Directive erstellen

Downloads:

Structual Directive erstellen

Eine Structual Directive ist eine einfache Angular Directive und wird deshalb mittels @Directive Decorator deklariert.

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

@Directive({
  selector: '[asRepeat]'
})
export class AsRepeatDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) { }
}

Input definieren

Damit eine Structual Directive direkt mittels Selector loslegen kann, muss das Input gleich dem Selector benannt werden.
Die Structual Directive heißt asRepeat, also heißt auch das Input asRepeat.

@Input() asRepeat: number;

Input als Einstieg definieren

Nun wird das Input auf eine SET Property abgeändert, sodass bei Wertänderungen des Inputs direkt das Template angepasst wird.
Hierbei wird zuvor der viewContainerRef gecleared und anschießend neu befüllt.
Dies geschieht in der Funktion createEmbeddedView.
Der 1. Parameter entspricht dem Template auf den die Structual Directive angewendet wird.
Der 2. Parameter sorgt dafür, dass man im Template mittels index auf den Iterationswert zugreifen kann.

@Input() set asRepeat(range: number) {
    if (range) {
        this.viewContainerRef.clear();
        for (let i = 0; i < range; i++) {
            this.viewContainerRef.createEmbeddedView(this.templateRef, {
                index: i
            });
        }
    }
}

Structual Directive importieren

Damit eine Structual Directive verwendet werden kann, muss sie in einem Angular Module importiert und deklariert werden.
z.B.: app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AsRepeatDirective } from './as-repeat.directive';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, AsRepeatDirective],
  exports: [AsRepeatDirective],
  bootstrap: [AppComponent]
})
export class AppModule { }

Im Template benutzen

Nun lässt sich die Structual Directive ganz einfach über asRepeat auf ein Tag anwenden.
Hierbei soll nun das Element 20 mal wiederholt werden und der Iterationswert in i geschrieben werden.
Anschließend wird der aktuelle Iterationswert innerhalb des div mittels {{i}} ausgegeben.

<div *asRepeat="20; let i = index">
    {{i}}
</div>

Ergebnis

Das Ergebnis sollte die Ausgabe von 0 bis 19 sein, was einer einfachen For Schleife entspricht (for i=0; i<20; i++)