Şablon Değişkenlerini Anlama

Şablon değişkenleri, bir şablonun bir bölümündeki verileri şablonun başka bir bölümünde kullanmanıza yardımcı olur. Kullanıcı girdisine yanıt vermek veya uygulamanızın formlarını hassas bir şekilde ayarlamak gibi görevleri gerçekleştirmek için şablon değişkenlerini kullanın.

Bir şablon değişken aşağıdakilere atıfta bulunabilir:

• şablon içindeki bir DOM öğesi
• bir yönerge veya bileşen
• ng-template‘den bir TemplateRef 
•  web component

Sözdizimi #

Şablonda, bir şablon değişkeni bildirmek için hashtag sembolünü, #, kullanırsınız. Aşağıdaki #phone şablon değişkeni, değeri <input> öğesi olan bir phone değişkeni bildirir.

<input #phone placeholder="phone number" />

Bileşen şablonunun herhangi bir yerinde bir şablon değişkenine atıfta bulunun. Burada, şablonun ilerisindeki bir <button> phone değişkenine atıfta bulunur.

<input #phone placeholder="phone number" />
  <!-- lots of other elements -->
  <!-- phone refers to the input element; pass its `value` to an event handler -->
  <button type="button" (click)="callPhone(phone.value)">Call</button>

Angular şablon değişkenlerine nasıl değer atar? #

Angular, bir şablon değişkenine, değişkeni bildirdiğiniz yere göre bir değer atar:

• Değişkeni bir bileşen üzerinde bildirirseniz, değişken bileşen örneğini ifade eder.
• Değişkeni standart bir HTML etiketinde bildirirseniz, değişken öğeye atıfta bulunur.
• Değişkeni bir <ng-template> öğesi üzerinde bildirirseniz, değişken şablonu temsil eden bir TemplateRef örneğine başvurur. <ng-template>  hakkında daha fazla bilgi için  How Angular uses the asterisk, *, syntax in Structural directives nasıl kullandığına bakın.

Bir ad belirten değişken #

Değişken sağ tarafta #var=”ngModel” gibi bir ad belirtiyorsa, değişken, eşleşen exportAs adına sahip öğedeki yönerge veya bileşene başvurur.

NgForm’u şablon değişkenleriyle kullanma #

Çoğu durumda, Angular şablon değişkenin değerini, üzerinde bulunduğu öğeye ayarlar. Önceki örnekte phone, <input> telefon numarasını ifade eder. Düğmenin tıklama işleyicisi <input> değerini bileşenin callPhone() yöntemine aktarır.

NgForm yönergesi, bir yönergenin exportAs adına referans vererek farklı bir değere referans almayı gösterir. Aşağıdaki örnekte, şablon değişkeni, itemForm, HTML ile ayrılmış olarak üç kez görünür.

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">Name</label>
  <input type="text" id="name" class="form-control" name="name" ngModel required />
  <button type="submit">Submit</button>
</form>
<div [hidden]="!itemForm.form.valid">
  <p>{{ submitMessage }}</p>
</div>

ngForm öznitelik değeri olmadan, itemForm‘un referans değeri HTMLFormElement,  <form>
olacaktır. Bir öğe bir Angular Bileşeni ise, öznitelik değeri olmayan bir referans otomatik olarak bileşen örneğine referans verecektir. Aksi takdirde, değeri olmayan bir referans, elemana bir veya daha fazla yönerge uygulanmış olsa bile DOM elemanına referans verecektir.

Şablon değişken kapsamı #

Tıpkı JavaScript veya TypeScript kodundaki değişkenler gibi, şablon değişkenleri de onları bildiren şablona kapsamlıdır.

Benzer şekilde, *ngIf ve *ngFor gibi  Structural directives  veya <ng-template> bildirimleri, JavaScript’in if ve for gibi kontrol akışı deyimlerinin yeni sözcüksel kapsamlar oluşturmasına benzer şekilde yeni bir iç içe şablon kapsamı oluşturur. Bu yapısal direktiflerden birinin içindeki şablon değişkenlerine sınırlarının dışından erişemezsiniz.

YARARLI: Bir değişkeni şablonda yalnızca bir kez tanımlayın, böylece çalışma zamanı değeri tahmin edilebilir kalır.

İç içe geçmiş bir şablonda erişim #

Bir iç şablon, dış şablonun tanımladığı şablon değişkenlerine erişebilir.

Aşağıdaki örnekte, <input> içindeki metnin değiştirilmesi <span> içindeki değeri değiştirir, çünkü Angular değişiklikleri ref1 şablon değişkeni aracılığıyla hemen günceller.

<input #ref1 type="text" [(ngModel)]="firstExample" />
  @if (true) {
    <span>Value: {{ ref1.value }}</span>
  }

Bu durumda, <span> üzerindeki *ngIf, ana kapsamından ref1 değişkenini içeren yeni bir şablon kapsamı oluşturur.

Ancak, ana şablondaki bir alt kapsamdan bir şablon değişkenine erişmek işe yaramaz:

<input *ngIf="true" #ref2 type="text" [(ngModel)]="secondExample" />
  <span>Value: {{ ref2?.value }}</span> <!-- doesn't work -->

Burada ref2, *ngIf tarafından oluşturulan alt kapsamda bildirilir ve ana şablondan erişilemez.

Şablon girdi değişkenleri #

Şablon girdi değişkeni, o şablonun bir örneği oluşturulduğunda ayarlanan bir değere sahip bir değişkendir.

Şablon girdi değişkenleri, NgFor‘un uzun biçimli kullanımında iş başında görülebilir:

<ul>
  <ng-template ngFor let-hero [ngForOf]="heroes">
    <li>{{hero.name}}
  </ng-template>
</ul>

NgFor yönergesi bunu heros dizisindeki her hero için bir kez örnekleyecek ve her örnek için hero değişkenini buna göre ayarlayacaktır.

Bir <ng-template> örneklendiğinde, farklı şablon girdi değişkenlerine bağlanabilen birden fazla adlandırılmış değer aktarılabilir. Bir girdi değişkeninin let- bildiriminin sağ tarafı, o değişken için hangi değerin kullanılması gerektiğini belirtebilir.

Örneğin NgFor, dizideki her bir hero indeksine de erişim sağlar:

<ul>
  <ng-template ngFor let-hero let-i="index" [ngForOf]="heroes">
    <li>Hero number {{i}}: {{hero.name}}
  </ng-template>
</ul>