Template-Variablen in Angular
In Angular kann mit Hilfe von Template-Variablen
auf die Tags der Seite zugegriffen werden.
Sie ermöglichen es, einen Tag an eine Variable
zu binden und während der Laufzeit der Komponente
darauf zu verweisen. Um eine solche Variable
zu deklarieren, muss vor ihrem Namen das
Zeichen # gesetzt werden.
Lasst es uns in der Praxis ansehen. Nehmen wir zum Beispiel an, wir haben ein Div. Wir weisen es einer Template-Variablen zu:
<div #userName>
text
</div>
Jetzt enthält die Variable userName
eine Referenz auf das DOM-Element unseres Divs.
Und wir können damit genauso umgehen, wie
es in purem JavaScript gemacht wird.
Lasst uns zum Beispiel den Text dieses Divs
in einem anderen Tag ausgeben:
<div>
{{ userName.textContent }}
</div>
Gegeben ist ein Div. Gegeben ist ein Bild. Weisen Sie die Referenz
auf das Bild einer Template-Variablen zu. Geben Sie
src unseres Bildes innerhalb des Divs aus.
