Angular – Template Local Variables | @let

Merhaba,

Angular mimarisinde çalışanların en büyük muradı, ihtiyaca istinaden yer yer template içerisinde değişken tanımlayıp kullanabilmekti diyebiliriz 🙂 Evet, bu murada Angular 18’de gelmiş olan Template Local Variables özelliği ile erdiğimizi söyleyebiliriz. Bu içeriğimizde gelen bu özelliği tüm detaylarıyla değerlendirecek ve inceleyeceğiz. Buyurun başlayalım…

Şimdi her şeyden önce Template Local Variables özelliğinden önce bir değişken tanımlama ihtiyacını nasıl gideriyorduk onu inceleyerek başlayalım…

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgIf, AsyncPipe],
  template: `
  <div *ngIf="user$ | async as u">
    {{u.name}}
  </div>
  `
})
export class AppComponent {
  user$: Observable<User>;

  ngOnInit() {
    let user: User = new User();
    user.name = "Gençay";
    user.surname = "Yıldız";
    this.user$ = of(user);
  }
}

Görüldüğü üzere template içerisinde değişkene ihtiyacımız olduğu durumlarda ngIf direktifiyle yukarıdaki gibi kasıntı bir çalışmayla bu ihtiyacı giderebiliyorduk. Ya da aynı işlemi @if control flow syntax’ı ile de aşağıdaki gibi gerçekleştirebiliyorduk;

  @if(user$ |async; as u){
    {{u.name}}
  }

Hak vereceğiniz üzere faaliyet alanı açısından oldukça dar ve kasıntı olan bu kullanım şeklinin bir de sayısal veriler üzerinde aşağıdaki gibi istemsiz handikaplarına da şahit oluyorduk. Şöyle ki;

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgIf, AsyncPipe],
  template: `
  <div *ngIf="point$ | async as p">
    {{p}}
  </div>

  @if(point$ |async; as p){
    {{p}}
  }
  `
})
export class AppComponent {
  point$: Observable<number>;

  ngOnInit() {
    this.point$ = of(1);
  }
}

Yukarıdaki ‘point$’ sayısal verisi eğer ki 0(sıfır)’ın haricinde bir değerse ekrana yansıtılmakta yok eğer 0 ise ekranda hiçbir şey görülmemektedir! Çünkü sıfır, if koşulunda false’a karşılık gelmekte ve böyle tutarsız, insicamsız, saçma sapan bir durum meydana gelmektedir!

İşte Angular 18’de tam da bu noktada template local variables özelliği sayesinde @let devreye girmekte ve ihtiyaca istinaden template içerisinde bir değişkeni daha programatik usulde bir yaklaşımla bildirmemize ve bunu şablonda istediğimiz noktada rahatça kullanmamıza olanak tanımaktadır.

  @let point = (point$ | async) ?? 0;
  {{point}}

Görüldüğü üzere artık şablonda rahatlıkla bir değişken tanımlayabilmekte ve ihtiyaç doğrultusunda bu değişken üzerinde işlemler gerçekleştirerek çalışmalarımızı yürütebilmekteyiz.

Şahsen bu özelliğin en güzel getirisi aşağıdaki gibi karmaşık kod konseptlerini şablon içerisinde değişkenle temsil ederek, kodun genel yapısını sadeleştirebilmesidir.

  <p>Doldur be meyhaneci...</p>
  @let content = document.getElementById("para").innerHTML.toUpperCase();
  {{content}}

Peki @let Nerelerde Kullanılır?

@let ile değişken tanımlamayı programatik mantık gereği ihtiyaç olan birçok noktada kullanabilmekteyiz. Şimdi gelin bu noktalardan esas olanları aşağıda birkaç satır eşliğinde ele alalım;

• async pipe’lar da kullanılabilir
  @let‘i, yukarıdaki satırlarda örneklendirdiğimiz üzere asenkron süreçlerde kullanabiliriz.

      <div>
          @let user = (user$ | async) ?? { name: 'Hilmi' };  
          <h1>{{user.name}}</h1>
      </div>
  

• control flow syntax’ında kullanılabilir
  Ee yani, mantıken control flow syntax’ında da kullanabiliriz.

      <div>
          @let user = (user$ | async) ?? { name: 'Hilmi' };  
          @if(user){
            <h1>{{user.name}}</h1>
          }
      </div>
  

• @for içerisinde kullanılabilir
  @for döngüsü içerisinde de tekrarlı bir şekilde kullanabiliriz.

  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [NgIf, AsyncPipe],
    template: `
    <ul>
      @let totalSalary = _totalSalary;
      {{totalSalary}}
      @for (employee of employees; track $index) {
        @let totalSalaryRate = (employee.salary * 100) / totalSalary;
        <li>{{employee.name}} -> {{employee.salary}} -> Total Salary Rate : {{totalSalaryRate}}</li>
      }
    </ul>
    `
  })
  export class AppComponent {
    employees: { name: string, salary: number }[] =
      [
        { name: 'Muiddin', salary: 100 },
        { name: 'Şuayip', salary: 200 },
        { name: 'Cafer', salary: 300 },
        { name: 'Hilmi', salary: 400 },
        { name: 'Rıfkı', salary: 500 }
      ];
  
    _totalSalary = this.employees.reduce((totalSalary, employee) => totalSalary + employee.salary, 0);
  }
  

• ternary operatörü ile kullanılabilir

    <ul>
      @for (employee of employees; track $index) {
        @let isAdmin = employee.admin ? 'Yes' : 'No';
        <li>{{employee.name}} | {{isAdmin}}</li>
      }
    </ul>
  

• signal ile kullanılabilir

  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [NgIf, AsyncPipe],
    template: `
      @let _user = user();
      <h1>{{_user.name}}</h1>
    `
  })
  export class AppComponent {
    user: Signal<User>;
    ngOnInit() {
      let _user: User = new User();
      _user.name = 'Gençay';
      _user.surname = 'Yıldız';
      this.user = signal(_user);
    }
  }
  

Velhasıl,

Görüldüğü üzere Angular mimarisi template local variables özelliği sayesinde control flow syntax’ta olduğu gibi gayet güzel ve önemli bir iyileştirmeyle karşımıza gelmekte ve ihtiyaç durumlarına karşın zarif bir çözüm sunmaktadır. Heyecanla bu özelliği deneyimlemek üzere olduğumuzu belirterek içeriği burada noktalıyorum.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…