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 biritem
elemanı için bir<li>
elemanı oluşturuldu.let item of items
: Her döngü adımındaitems
dizisindeki bir eleman,item
adlı değişkene atanır.{{ item }}
: Her bir döngü adımındaitem
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 birfruit
nesnesi için bir<li>
elemanı oluşturuldu.let fruit of fruits
: Her döngü adımındafruits
dizisindeki birFruit
nesnesi,fruit
adlı değişkene atanıldı.{{ fruit.name }} - {{ fruit.color }}
: Her bir döngü adımındafruit
nesnesininname
vecolor
ö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 biritem
elemanı için bir<li>
elemanı oluşturuldu.let item of items; let i = index
: Her döngü adımındaitems
dizisindeki bir eleman,item
adlı değişkene atanır ve aynı zamanda bu elemanın indisinii
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.
Yorumlar Henüz yorum yapılmamış
Yeni Yorum