Angular’ da karar verme yapılarını daha önce incelemiştik. bknz : https://gelistir.net/238/angular-ngif-ve-else/
ngIf ve else directive’ leri mümkün kıldığı kullanım imkanları ile ngSwitch’ e ihtiyaç duydurtmuyor. LAKİN, söz konusu performans olduğunda, ngSwitch’ e ihtiyaç duyabiliyoruz.

Neden Switch ?

https://gelistir.net/78/switch-ve-if-else-if-kiyaslamasi/ adresinde, NEDEN Switch yapısına ihtiyaç duyarız sorusuna cevap vermiştim. Switch yapısını Angular uygulamalarımızda mutlaka kullanacağımız noktalar olacaktır.

ngSwitch

  • Öncelikle bir değişken ve değerini tanımlamalıyız;
    teamSlug = 'FB';
  • Elimizdeki Slug’ a göre, ilgili takımın ismini yazdıracağımız bir kurgu yapıyoruz;
    <div [ngSwitch]="teamSlug">
      <p *ngSwitchCase=" 'GS' ">Galatasaray</p>
      <p *ngSwitchCase=" 'FB' ">Fenerbahçe</p>
      <p *ngSwitchCaseDefault>Milli Takım</p>
    </div>
  • ngSwitch property binding ile ilgili değişkeni ele alıyoruz.
  • *ngSwitchCase directive’ i ile her bir ihtimali yazıyoruz. Eğer ki, case’ e string bir değer yazıcaksak, ekstradan tek tırnak da eklemeliyiz.
    Çünkü ngSwitchCase içerisinde expression çalışır.
  • Hiçbir ihtimalle uyuşmaz ise, ngSwitchCaseDefault directive’ i çalışır.

Canlı Örnek;

Last modified: 10 November 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.