Angular Kodları

Angular programlama dili ile yazılmış konuşan kod örnekleri.

1
Kod üzerine gelin
2
Sesli açıklamayı dinleyin
3
Öğrenin ve uygulayın
Angular Orta
58 
// 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 }
  ];
}

Angular ile *ngFor ve *ngIf Kullanımı (Liste ve Koşul Görünümü)

Detay

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.

Angular Orta
64 
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  mesaj: string = "Zebifytech Angular örneği";
}

Angular ile Veri Bağlama (Two-Way Binding)

Detay

Angular’da veriler iki yönlü olarak bağlanabilir: hem bileşen (component) hem HTML tarafı birbirini anında günceller. Bu örnekte, [(ngModel)] kullanarak input alanındaki değişikliğin anında ekranda yansımasını sağlıyoruz. Bu yapı, formlar ve dinamik arayüzlerde temel bir Angular yeteneğidir.

Web Speech API Nasıl Çalışır?

Modern tarayıcıların sunduğu Web Speech API ile kodları sesli olarak açıklıyoruz.

Hover Efekti

Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak sesli açıklama başlar.

Sesli Açıklama

Web Speech API kullanılarak kod açıklaması Türkçe olarak seslendirilir.

Öğrenme

Görsel ve işitsel öğrenme ile kodları daha kolay anlayabilir ve öğrenebilirsiniz.

Kendi Konuşan Kodunuzu Oluşturun

Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.

Proje Danışmanlığı Öğreticileri İncele