Angular’da *ngIf, *ngFor ve ngTemplate Kullanımı

Angular, güçlü template yönetimi ve dinamik veri gösterimi için bir dizi direktife sahiptir. Bu direktiflerden bazıları *ngIf, *ngFor ve ngTemplate’dir. Bu makalede bu direktifleri detaylı bir şekilde inceleyeceğiz.

*ngIf Kullanımı

ngIf, bir HTML elementini render etmek veya etmemek için belirli bir koşulu kontrol etmek için kullanılır. Bu, bir if-else mantığına benzer. Aşağıda *ngIf kullanımına dair basit bir örnek bulunmaktadır:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="condition">
      Bu içerik, condition true olduğunda görünür.
    </div>
  `
})
export class AppComponent {
  condition: boolean = true;
}

İlk olarak, condition adında bir boolean değişkeni tanımladık ve bu değişkenin sadece true veya false değerini alabileceğini belirttik. TypeScript dilinde, boolean tipi, sadece true veya false değerlerini alabilen bir veri tipidir. Bu sayede değişkenin başka bir türde değer almasını önledik.

Sonrasında, condition değişkenine başlangıçta true değerini atadık. Yani, condition değişkeni başlangıçta true olduğu için, ilgili HTML öğesi görünecek. Eğer condition değişkeni false olarak ayarlanmış olsaydı, HTML öğesi görünmeyecekti.

Bu şekilde, condition değişkeni ile kontrol edilen bir *ngIf ifadesi ile belirli bir duruma bağlı olarak HTML öğelerini dinamik olarak görünür veya görünmez yapabiliyoruz.

Birden fazla ngIf kullanımı ise

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="user.isOnline">
      Kullanıcı Çevrimiçi
    </div>
    <div *ngIf="!user.isOnline">
      Kullanıcı Çevrimdışı
    </div>
  `
})
export class AppComponent {
  user = {
    isOnline: true
  };
}

İlk olarak, bir user nesnesi oluşturduk ve bu nesneye isOnline adlı bir parametre ekledik. Bu paramtrenin değerini true olarak ayarlayarak, kullanıcının çevrimiçi olduğunu belirttik.

Daha sonra, *ngIf direktifi içinde user.isOnline değerini kontrol ettik. Eğer bu değer true ise

<div *ngIf="user.isOnline">
   Kullanıcı Çevrimiçi
</div>

ilgili HTML öğesi görünür olacak. Eğer bu değer false false ise

<div *ngIf="!user.isOnline">
   Kullanıcı Çevrimdışı
</div>

ilgili HTML öğesi görünür olacak.

Şimdi sıra geldi ngIf içerisinde else kullanmak onun için ise ng-template kullanmamız gerekecek onun için else kısmını burada göstermeyip aşağıda anlacağım ng-template içerisinde göstermiş olacağım.

Yani, kullanıcının çevrimiçi olup olmadığına bağlı olarak belirli bir HTML bloğunu görünür veya görünmez hale getirebiliyoruz.

*ngFor Kullanımı

ngFor, bir dizi veya nesne koleksiyonu üzerinde html elementi üzerinde döngü yapmak için kullanılır. Bu, dinamik olarak liste veya tablo oluşturmak için çok yaygındır.

1-) Dizi Elemanları Üzerinde Gezinme:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of items">
        {{ item }}
      </li>
    </ul>
  `
})
export class AppComponent {
  items: string[] = ["Apple", "Banana", "Orange"];
}

Burada items adlı bir dizi değişkeni tanımlandı. Dizi, string türünden elemanlar içeriyor. string[] ifadesi TypeScript'te bir string dizisi olduğunu belirtir. Dizi, “Apple”, “Banana”, ve “Orange” string elemanlarını içeriyor.

Html şablonunda ise

<ul> ve <li> HTML elemanları ile bir liste oluşturuldu.
*ngFor direktifi ile döngü başlatıldı ve her bir item elemanı için bir <li> elemanı oluşturuldu.
let item of items: Her döngü adımında items dizisindeki bir eleman, item adlı değişkene atanır.
{{ item }}: Her bir döngü adımında item değişkeni ekrana yazdırılır.

2-) Nesne Elemanları Üzerinde Gezinme:

import { Component } from '@angular/core';

interface Fruit {
  name: string;
  color: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let fruit of fruits">
        {{ fruit.name }} - {{ fruit.color }}
      </li>
    </ul>
  `
})
export class AppComponent {
  fruits: Fruit[] = [
    { name: "Apple", color: "Red" },
    { name: "Banana", color: "Yellow" },
    { name: "Orange", color: "Orange" }
  ];
}

fruits adlı bir dizi değişkeni tanımlandı. Dizi, Fruit türünden nesneler içeriyor. Fruit[] ifadesi TypeScript'te bir Fruit nesnesi dizisi olduğunu belirtir. Dizi, { name: "Apple", color: "Red" }, { name: "Banana", color: "Yellow" }, ve { name: "Orange", color: "Orange" } nesneleri ile mevcut.

Html şablonunda ise

<ul> ve <li> HTML elemanları ile bir liste oluşturuldu.
*ngFor direktifi ile döngü başlatıldı ve her bir fruit nesnesi için bir <li> elemanı oluşturuldu.
let fruit of fruits: Her döngü adımında fruits dizisindeki bir Fruit nesnesi, fruit adlı değişkene atanıldı.
{{ fruit.name }} - {{ fruit.color }}: Her bir döngü adımında fruit nesnesinin name ve color özellikleri ekrana yazdırıldı.

3-) Döngü İndisini Kullanma:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of items; let i = index">
        {{ i + 1 }}. {{ item }}
      </li>
    </ul>
  `
})
export class AppComponent {
  items: string[] = ["Apple", "Banana", "Orange"];
}

items adlı bir dizi değişkeni tanımlandı. Dizi, string türünden elemanlar içeriyor. string[] ifadesi TypeScript'te bir string dizisi olduğunu belirtir. Dizi, “Apple”, “Banana”, ve “Orange” string elemanlarını içerir.

Html şablonu ise

<ul> ve <li> HTML elemanları ile bir liste oluşturuldu.
*ngFor direktifi ile döngü başlatıldı ve her bir item elemanı için bir <li> elemanı oluşturuldu.
let item of items; let i = index: Her döngü adımında items dizisindeki bir eleman, item adlı değişkene atanır ve aynı zamanda bu elemanın indisini i adlı değişkene atanır.
{{ i + 1 }}. {{ item }}: Her bir döngü adımında, elemanın sıra numarası ve içeriği ekrana yazdırılır.

Her üç örnekte de, *ngFor direktifini kullanarak dizilerde veya nesne dizilerinde döngü yapmak ve bu verileri düzenli bir şekilde HTML’e entegre etmek mümkündür.

4-) Odd ve Even Kullanımı:

<ul>
  <li *ngFor="let fruit of fruits; let even = even; let odd = odd">
    {{ fruit }} - {{ even ? 'Even' : 'Odd' }}
  </li>
</ul>

Bu örnekte, her meyve için even ve odd değişkenleri oluşturularak, meyve çift mi tek mi kontrol edilir ve ekrana yazdırılır.

5-) First ve Last Kullanımı:

<ul>
  <li *ngFor="let fruit of fruits; let first = first; let last = last">
    {{ fruit }} - {{ first ? 'First' : '' }}{{ last ? 'Last' : '' }}
  </li>
</ul>

Bu örnekte, her meyve için first ve last değişkenleri oluşturularak, meyvenin dizideki ilk veya son eleman olup olmadığı kontrol edilir ve ekrana yazdırılır.

First

Sadece ilk elemanın gözüktüğü bir örnek:

<ul>
  <li *ngFor="let fruit of fruits; let first = first">
    <ng-container *ngIf="first">
      {{ fruit }}
    </ng-container>
  </li>
</ul>

ng-container kullanarak *ngIf direktifini içerideki içeriği sarmaladık. Böylece sadece ilk elemanın olduğu durumda listeye sadece bir eleman eklemiş oluyoruz.

Last

Sadece son elemanın gözüktüğü bir örnek:


<ul>
  <li *ngFor="let fruit of fruits; let last = last">
    <ng-container *ngIf="last">
      {{ fruit }}
    </ng-container>
  </li>
</ul>

ng-container içerisinde *ngIf direktifi kullanarak sadece son elemanın görüntülenmesini sağlıyoruz. Bu sayede listenin yalnızca son elemanı görüntülenir.

ngTemplate Kullanımı

ng-template Angular'da kullanılan ve bir şablon (template) tanımlamamıza olanak tanıyan bir yapıdır.

ng-template genellikle *ngIf, *ngFor gibi yapılarla birlikte kullanılır ve belirli bir şarta veya döngüye bağlı olarak içeriği kontrol etmemize olanak tanır.

NGIF ve NG-TEMPLATE KULLANIMI

Bu direktif, bir şartın sağlanıp sağlanmadığını kontrol eder ve şart sağlanıyorsa içeriği görüntüler. Aksi takdirde, şart sağlanmazsa içerik görünmez.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-template [ngIf]="condition">
      <!-- Koşul sağlandığında gösterilecek içerik -->
      <p>Şart sağlandı!</p>
    </ng-template>
  `,
})
export class AppComponent {
  condition: boolean = true;
}

ngIf direktifi, [ngIf]="condition" ifadesi ile kullanılmıştır.

condition değişkeni, TypeScript kodunda belirli bir şartı temsil eder. Eğer condition true ise, içerideki <p> etiketi görünür olacaktır.

NGFOR ve NG-TEMPLATE KULLANIMI

ng-template genellikle *ngFor ile birleştirilerek tekrar eden içeriği özelleştirmek için kullanılır.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <ng-template ngFor let-item [ngForOf]="items">
        <!-- *ngFor ile döngü başlatıldı -->
        <li>{{ item }}</li>
      </ng-template>
    </ul>
  `,
})
export class AppComponent {
  items: string[] = ["Apple", "Banana", "Orange"];
}

ngFor direktifi, ngForOf ifadesi ile kullanılmıştır.

items dizisi, TypeScript kodunda tanımlanmış bir dizi. *ngFor ile bu dizi üzerinde döngü başlatılmış ve her bir eleman için <li> elemanı oluşturulmuştur.

NGFOR NGIF ve NG-TEMPLATE KULLANIMI

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <ng-template ngFor let-item [ngForOf]="items">
        <ng-template ngIf="item !== 'Banana'">
          <li>{{ item }}</li>
        </ng-template>
      </ng-template>
    </ul>
  `,
})
export class AppComponent {
  items: string[] = ["Apple", "Banana", "Orange"];
}

Bu örnekte, *ngFor ile bir döngü başlatılmış ve *ngIf ile bir şart kontrol edilmiştir. Sadece belirli bir şartı sağlayan elemanlar gösterilmektedir.

*ngFor direktifi, ngForOf ifadesi ile kullanılmıştır.

items dizisi, TypeScript kodunda tanımlanmış bir dizi. *ngFor ile bu dizi üzerinde döngü yapılıyor.

*ngIf direktifi ile her bir item için belirli bir şart kontrol edilmiştir. Eğer item değeri 'Banana' değilse, ilgili <li> elemanı görünür olacaktır.

Angular’da ngIf, ngFor ve ngTemplate Kullanımı

*ngIf Kullanımı

*ngFor Kullanımı

ngTemplate Kullanımı

NGFOR ve NG-TEMPLATE KULLANIMI

NGFOR NGIF ve NG-TEMPLATE KULLANIMI

Yorumlar Henüz yorum yapılmamış

Yeni Yorum