Neu in Angular 4 - Dynamic Components

19.05.2017 Stefan Welsch
Mobile Tech angular handson

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 - pioneer, stuntman, mentor. As the founder of b-nova, Stefan is always looking for new and promising fields of development. He is a pragmatist through and through and therefore prefers to write articles that are as close as possible to real-world scenarios.