Angular 4 – ngIf Direktifi

Merhaba,

Bu içeriğimizde; Angular uygulamalarında, yapısal olarak bildiğiniz klasik “if – else if – else” mantığında DOM nesnelerine belirli şartlara göre kontrol sağlamaya ve müdahalede bulunmaya yarayan ngIf direktifi üzerine konuşuyor olacağız.

ngIf ile If Yapısı

İlk olarak ngIf direktifinin en sade prototipini ele alarak konuya başlayalım;

<[HTML NESNESİ] *ngIf="[ŞART]">

Yukarıdaki prototipi incelerseniz eğer herhangi bir html nesnesine verilen(div, span, hr, br vs. vs.) ngIf direktifi içerisindeki şart geçerliyse eğer ilgili html nesnesi sayfaya basılacaktır.

Şimdi aşağıdaki örnekleri inceleyiniz.

  • <div *ngIf="3 == 3">
      Merhaba
    </div>
    

    Angular 4 - ngIf Direktifi

  • <div *ngIf="false">
      Merhaba
    </div>
    

    Şart “false” olduğu için div nesnesini ekrana basmayacaktır.

Eğer ki component class içerisinde tanımlanan değişkenler üzerinde ngIf yapısını kullanmak istiyorsanız aşağıdaki örneklerde olduğu gibi çalışabilirsiniz.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-ng-if-example',
  templateUrl: './ng-if-example.component.html',
  styleUrls: ['./ng-if-example.component.css']
})
export class NgIfExampleComponent implements OnInit {
  deger1: number = 100;
  deger2: string = "Merhaba";
  deger3: boolean = false;
  constructor() { }
  ngOnInit() {
  }
}
  • <div *ngIf="deger1">
      {{deger1}}
    </div>
    <div *ngIf="deger2">
      {{deger2}}
    </div>
    

    Bu şekilde ilgili değişkenin değeri var mı? yok mu? kontrol ediliyor. Eğer varsa ilgili html nesnesi ekrana basılıyor.
    Angular 4 - ngIf Direktifi

  • <div *ngIf="!deger3">
      {{deger3}}
    </div>
    

    “True” değeri yazılacaktır.

  • <div *ngIf="deger1 >= 100">
      {{deger1}}
    </div>
    

    “100” değeri yazılacaktır.

  • <div *ngIf="deger1 >= 100 && deger2 == 'Merhaba'">
     {{deger2}} {{deger1}}
    </div>
    

    “Merhaba 100” değeri yazılacaktır.

ngIf ile If – Else Yapısı

Eğer ki ngIf direktifi ile “if – else if” şeklinde şart koşmak istiyorsanız aşağıdaki prototipte olduğu gibi çalışmanız gerekmektedir.

<[HTML NESNESİ] *ngIf="[ŞART]; else [GOSTERİLECEK HTML NESNESİ]">

Burada “else” durumunda çalışacak html nesneleri olarak genellikle <ng-template> </ng-template> nesnesini tercih etmekteyiz.
Örnek olarak aşağıdaki kod blokları “if – else” yapısının kullanımı hakkında daha netleştirici olacaktır.

  • <div *ngIf="true; else elseBlock">
      ...eğer şart doğruysa...
    </div>
    <ng-template #elseBlock> ...eğer şart yanlışsa...</ng-template>
    

    if “true” değerine sahip olduğu için “…eğer şart doğruysa…” değeri yazılacaktır.

  • import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-ng-if-example',
      templateUrl: './ng-if-example.component.html',
      styleUrls: ['./ng-if-example.component.css']
    })
    export class NgIfExampleComponent implements OnInit {
      HavaBulutluMu: boolean = false;
      constructor() { }
      ngOnInit() {
      }
    }
    
    <div *ngIf="HavaBulutluMu; else elseBlock">
      Bulutlu
    </div>
    <ng-template #elseBlock> Bulutsuz</ng-template>
    

    “Bulutsuz” değeri yazılacaktır.

ngIf ile If – Else If – Else Yapısı

Araştırmalarım neticesinde Angular 4 kütüphanesinde ngIf direktifine ait direkt olarak “if – else if- else” kalıbında bir yapı bulunmamaktadır. Bu yüzden “else if” mantığını algoritmik olarak gerçekleştirmekte ve aşağıdaki mantıkta çalışmaktayız.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-ng-if-example',
  templateUrl: './ng-if-example.component.html',
  styleUrls: ['./ng-if-example.component.css']
})
export class NgIfExampleComponent implements OnInit {
  OdenenTutar: number = 1000;
  constructor() { }
  ngOnInit() {
  }
}
<div *ngIf="OdenenTutar >= 250 && OdenenTutar <= 500;else elseifBlock1">
  {{OdenenTutar}} : [250 ile 500] arasında.
</div>
<ng-template #elseifBlock1>
  <div *ngIf="OdenenTutar >= 500 && OdenenTutar <= 1000; else elseifBlock2">
    {{OdenenTutar}} : [500 ile 1000] arasında.
  </div>
</ng-template>
<ng-template #elseifBlock2>
  <div *ngIf="OdenenTutar >= 1000 && OdenenTutar <= 1500; else elseBlock">
    {{OdenenTutar}} : [1000 ile 1500] arasında.
  </div>
</ng-template>
<ng-template #elseBlock>
{{OdenenTutar}} : [1500'den büyük.
</ng-template>

Yukarıdaki kod bloğunu incelerseniz eğer, her bir else bir başka if’e yönlenmektedir. Yani farklı bir şekilde “if – else if – else” yapısı oluşturmuş bulunmaktayız.

ngIf ile If – Then – Else Yapısı

ngIf direktifinde şart eğer doğruysa ngIf’in tanımlandığı html nesnesi dışındaki farklı bir nesne üzerinde çalışma yapmak istiyorsanız “then” yapısını kullanmanız gerekmektedir.

Örneğin;

<div *ngIf="3 > 2; then thenBlock; else elseBlock">
  if
</div>
<ng-template #thenBlock>then</ng-template>
<ng-template #elseBlock>else</ng-template>

şeklinde bir çalışma gerçekleştirirsek şartımız true olduğu zaman ekrana “if” değil “then” yazısı yazılacaktır.

Evet…
Angular 4 kütüphanesine özel ngIf direktifi üzerine konuşacaklarımız yeterli olduğu için artık makalemizi burada noktalayabiliriz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.