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.