Dynamisches HTML(-Elemente) und Stringinterpolation

Wer mit dynamischen HTML-Elementen und Stringinterpolation arbeitet wird früher oder später auf das Problem stoßen, dass Element-Attribute (z.B. „attr.data-target“) nicht mit normaler Stringinterpolation arbeiten können.

Szenario: Per Klick auf einen Link soll ein PopUp aktiv werden (Quelle: bootsnipp.com)

<!-- zu klickender Link -->
          <div class="row">
              <div class="col-md-12">
                  <a href="#_{{ index }}" class="play" title="Play video" data-toggle="modal" [attr.data-target]="'#playerpopup_' + index"></a>
              </div>
          </div>

<!-- PopUp  -->
      <div id="popup_{{ index }}" class="modal fade in" role="dialog">
          Foo
      </div>

Gut zur erkennen:
Im Link wird das Attribut „data-target“ explizit mit

[attr.data-target]="'#playerpopup_' + index"

angesprochen.

Die Id des PopUps wiederum wird normal via Stringinterpolation gesetzt:

id="videoplayerpopup_{{ index }}"

„index“ ist dabei lediglich ein Counter, der via ngFor in die Komponente hineingereicht wird.

Einbinden der Youtube-/Dailymotion-iFrame-API

Zum Einbinden der Youtube- und/oder Dailymotion-iFrame-API gibt es schöne Dokumentation (hier und hier). Die Herausforderung bei der Einbindung dieser APIs in Angular 2 ist, dass immer erst die eigentlichen APIs (im DOM) geladen werden müssen und erst im Anschluss darauf basierend die entsprechenden Objekte der Video-Player erstellt und initialisiert werden können.

Wie das gemacht wird kann direkt in den entsprechenden Repos auf GitHub eingesehen werden:

(Der Code darf gerne weiterverwendet oder erweitert und genutzt werden)

Laden von umgebungsabhängigen Konfigurationsdateien

Wer vor dem eigentlichen Laden der Angular-Anwendung Werte basierend auf der aktuellen Umgebung („development“, „production“, …) laden möchte, kann das u.a. mit der in diesem Git-Beitrag zur Verfügung gestellten Config-Klasse relativ einfach tun.
Laden von umgebungsabhängigen Konfigurationsdateien weiterlesen