Neu in Angular 4 - Dynamic Components

19.05.2017 Stefan Welsch
Mobile Tech Angluar Hands-on

Mit der neuen ngComponentOutlet Direktive ist es nun möglich, dynamische Komponenten in einer deklarativen Art und Weise erstellen. Vorher war es komplex und sehr aufwendig, dynamische Komponenten zu erstellen, da man sehr viel Code selbst schreiben musste.

Jetzt ist der Einsatz der ngComponentOutlet Direktive sehr viel einfacher geworden!

Im folgenden Beispiel soll der Benutzer entsprechend begrüsst werden. Handelt es sich um den ersten Besuch auf der Seite, soll eine andere Begrüssung angezeigt werden, wie bei einem erneuten Besuch.

@Component({
    selector: 'app-first-time-visitor',
    template: '<h1>Welcome to b-nova!</h1>',
})
export class FirstTimeVisitorComponent {}

@Component({
    selector: 'app-repeating-visitor',
    template: '<h1>Welcome Back to b-nova!</h1>',
})
export class RepeatingVisitorComponent {}

@Component({
    selector: 'app-root',
    template: `
    <h1>Hello b-nova Friend</h1>
    <ng-container *ngComponentOutlet="welcome"></ng-container>
    `
})
export class App implements OnInit{
    welcome = FirstTimeVisitorComponent;

    ngOnInit() {
        if(!this.user.isfirstVisit){
            this.welcome = RepeatingVisitorComponent;
        }
    }
}

In der Application definieren wir die ngComponentOutlet Direktive mit der welcome Referenz. Diese Referenz wird initialisiert mit der FirstTimeVisitorComponent. Anschliessend wird in der ngOnInit überprüft, ob es sich um den ersten oder einen wiederkehrenden Besuch handelt. Im Falle eines wiederkehrenden Besuchers wird die welcome Referenz auf die RepeatingVisitorComponent gesetzt. So wird dem wiederkehrenden Besucher die Nachricht Welcome Back to b-nova! anstatt Welcome to b-nova! angezeigt.

Stefan Welsch – Pionier, Stuntman, Mentor. Als Gründer von b-nova ist Stefan immer auf der Suche nach neuen und vielversprechenden Entwicklungsfeldern. Er ist durch und durch Pragmatiker und schreibt daher auch am liebsten Beiträge die sich möglichst nahe an 'real-world' Szenarien anlehnen.