Koşullu İfadeler ve Döngüler

Angular gibi bir çerçeve kullanmanın avantajlarından biri, geliştiricilerin karşılaştığı ortak problemler için yerleşik çözümler sunmasıdır. Buna örnek olarak belirli bir koşula bağlı olarak içerik gösterme, uygulama verilerine dayalı olarak öğelerin listesini oluşturma vb. verilebilir.

Bu sorunu çözmek için Angular, şablonlarınızın ne zaman ve nasıl oluşturulması gerektiğini çerçeveye söyleyen yerleşik kontrol akış bloklarını kullanır.

Koşullu renderlama #

Geliştiricilerin sıkça karşılaştığı senaryolardan biri, şartlara bağlı olarak şablonlarda içeriği gösterme veya gizleme isteğidir.

Bu, kullanıcının izin seviyesine bağlı olarak ekranda belirli kontrolleri gösterip göstermemeniz gerekip gerekmediği konusunda yaygın bir örnektir.

@if bloğu #

Benzer şekilde JavaScript’in if ifadesine, Angular @if kontrol akış bloklarını şablonun ve içeriğinin bir kısmını koşula bağlı olarak gizlemek ve göstermek için kullanır.

// user-controls.component.ts
@Component({
  standalone: true,
  selector: 'user-controls',
  template: `
    @if (isAdmin) {
      <button>Erase database</button>
    }
  `,
})
export class UserControls {
  isAdmin = true;
}

Bu örnekte, Angular sadece isAdmin özelliği true ise <button> elementini renderlar. Aksi takdirde sayfada görünmez.

@else blok #

@if bloğu birçok durumda yardımcı olabilirken, koşul karşılanmadığında yedek arayüzünü de göstermek yaygındır.

Örneğin, UserControls bileşeninde, boş bir ekran yerine, kullanıcıların kimlik doğrulaması yapmadıkları için herhangi bir şey göremediklerini bilmeleri kullanıcılar için faydalı olacaktır.

JavaScript’in else ifadesine benzer bir yedek gerektiğinde, aynı etkiyi elde etmek için bir @else bloğu ekleyin.

// user-controls.component.ts
@Component({
  standalone: true,
  selector: 'user-controls',
  template: `
    @if (isAdmin) {
      <button>Erase database</button>
    } @else {
      <p>You are not authorized.</p>
    }
  `,
})
export class UserControls {
  isAdmin = true;
}

Liste oluşturma #

@for blok #

JavaScript’in for…of döngülerine benzer şekilde, Angular, tekrarlanan öğeleri oluşturmak için @for bloğunu sağlar.

<!-- ingredient-list.component.html -->
<ul>
  @for (ingredient of ingredientList; track ingredient.name) {
    <li>{{ ingredient.quantity }} - {{ ingredient.name }}</li>
  }
</ul>

// ingredient-list.component.ts
@Component({
  standalone: true,
  selector: 'ingredient-list',
  templateUrl: './ingredient-list.component.html',
})
export class IngredientList {
  ingredientList = [
    {name: 'noodles', quantity: 1},
    {name: 'miso broth', quantity: 1},
    {name: 'egg', quantity: 2},
  ];
}

Ancak, standart bir for…of döngüsünün aksine, ek bir track anahtar kelimesi olduğunu fark etmiş olabilirsiniz.

track özelliği #

Angular, bir liste elemanını @for ile render ettiğinde, bu öğeler daha sonra değişebilir veya taşınabilir. Angular, öğeleri yeniden sıralama yoluyla izlemek için genellikle öğenin bir özelliğini benzersiz bir tanımlayıcı veya anahtar olarak ele alarak her öğeyi izlemesi gerekir.

Bu, listedeki herhangi bir güncellemenin UI’da doğru bir şekilde yansıtılmasını ve özellikle durumsal öğeler veya animasyonlar açısından Angular içinde uygun bir şekilde izlenmesini sağlar.

Bunu başarmak için, track anahtar sözcüğü ile Angular’a benzersiz bir anahtar sağlayabiliriz.