Angular'da Şablon Değişkenleri

Angular'da sayfa etiketlerine şablon değişkenleri aracılığıyla erişim sağlanabilir. Bunlar, bir etiketi bir değişkene bağlamanıza ve bileşen çalışırken buna başvurmanıza olanak tanır. Böyle bir değişken bildirmek için, adından önce # işareti koymanız gerekir.

Pratikte görelim. Örneğin, bir div'imiz olsun. Onu bir şablon değişkenine yazalım:

app/app.component.html<div #userName>
  text
</div>

Şimdi userName değişkeninde div'imizin DOM öğesine bir referans bulunacak. Ve biz buna saf JavaScript'te yapıldığı gibi başvurabiliriz. Örneğin, bu div'in metnini başka bir etiketin içinde gösterelim:

app/app.component.html<div>
  {{ userName.textContent }}
</div>