Angular ile *ngFor ve *ngIf Kullanımı (Liste ve Koşul Görünümü)
Angular’da *ngFor ve *ngIf direktifleri, dinamik veri gösterimi için en sık kullanılan yapılardır. Bu örnekte, bir ürün listesi oluşturuyoruz ve stokta olmayan ürünleri koşullu olarak gizliyoruz.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
urunler = [
{ ad: "GrandX Evye", stok: true },
{ ad: "Nano Batarya", stok: false },
{ ad: "Mutfak Dolabı", stok: true }
];
}Kod Açıklaması
Angular’da *ngFor ve *ngIf direktifleri, dinamik veri gösterimi için en sık kullanılan yapılardır.
Bu örnekte, bir ürün listesi oluşturuyoruz ve stokta olmayan ürünleri koşullu olarak gizliyoruz.
Nasıl Çalışır?
Bu kod örneği, Web Speech API kullanılarak sesli olarak açıklanmaktadır. Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak açıklama başlar.
Kullanım Alanları
Web Speech API
Bu kod örneği Web Speech API kullanılarak sesli olarak açıklanmaktadır.
İlgili Kodlar
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
mesaj: string = "Ze...Angular ile Veri Bağlama (Two-Way Binding)
Kendi Konuşan Kodunuzu Oluşturun
Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.