Angular'da Component Yapısı ve Bileşen Oluşturma

Merhaba arkadaşlar, bu makalemizde Angular'ın kalbi olan Component yapısını inceliyor olacağız. Angular uygulamaları aslında iç içe geçmiş component'lerden oluşur. Ana sayfa bir component, içindeki header bir component, footer bir component, ortadaki kart'lar bile birer component. Yani Angular dünyasında küçük parçaları birleştirerek büyük bir uygulama oluşturuyoruz.

Component Nedir?
Bir component üç ana dosyadan oluşur: TypeScript sınıfı (davranış ve veri), HTML template (görünüm) ve CSS stili (tasarım). Angular bu üçlüyü @@Component dekoratörü ile birleştiriyor ve bize tek bir mantık bütünü sunuyor.

En basit component şöyle görünür:

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

@@Component({
  selector: 'app-selamlama',
  standalone: true,
  template: `<h2>{{ mesaj }}</h2>`,
  styles: [`h2 { color: #d97706; font-family: serif; }`]
})
export class SelamlamaComponent {
  mesaj = 'Merhaba Angular Dünyası!';
}

Burada önemli üç nokta var:

- selector: HTML'de bu component'i kullanırken yazacağımız etiket. Burada <app-selamlama></app-selamlama> şeklinde kullanacağız.
- template: Component'in HTML'i. İçerisinde {{ }} ile TypeScript sınıfından gelen değişkenleri basabiliyoruz. Buna interpolation (veri enterpolasyonu) deniyor.
- styles: Sadece bu component'e özel CSS. Angular encapsulation sayesinde buradaki stiller başka component'leri etkilemiyor.

CLI ile Component Oluşturma
Her component için elle dosya oluşturmak zorunda değiliz. Angular CLI bize yardımcı oluyor:

ng generate component kullanici-karti
# veya kısaltılmışı:
ng g c kullanici-karti

IDE tarafinda: VS Code tarafinda @Component dekoratoru yazarken Angular Language Service otomatik olarak selector/template/style onerileri veriyor. Ctrl+Boslik ile tum metadata alanlarini listeyebilirsiniz.

Bu komutu çalıştırdığımızda CLI bizim için şunları yapar:

- src/app/kullanici-karti/ klasörünü oluşturur
- kullanici-karti.component.ts (class)
- kullanici-karti.component.html (template)
- kullanici-karti.component.scss (style)
- kullanici-karti.component.spec.ts (unit test)

Modern Angular'da (v17+) component'ler standalone olarak üretilir, yani modül dosyasına ihtiyaç duymazlar, import edilerek kullanılırlar.

Component'e Veri Geçmek: @@Input
Component'leri birbirinden ayrı tutarız ama aralarında veri de paylaştırmamız gerekir. Bunun için @@Input dekoratörünü kullanıyoruz. Örneğin kullanıcı bilgisi gösteren bir kart yazalım:

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

@@Component({
  selector: 'app-kullanici-karti',
  standalone: true,
  template: `
    <div class="kart">
      <h3>{{ ad }}</h3>
      <p>{{ meslek }}</p>
      <small>{{ yas }} yaşında</small>
    </div>
  `,
  styles: [`.kart { border: 1px solid #eee; padding: 1rem; border-radius: 8px; }`]
})
export class KullaniciKartiComponent {
  @@Input() ad = '';
  @@Input() meslek = '';
  @@Input() yas = 0;
}

Bu component'i artık üst bir component'ten şöyle kullanabiliriz:

<app-kullanici-karti ad="Sem Göksu" meslek="Yazılım Geliştirici" [yas]="35"></app-kullanici-karti>
<app-kullanici-karti ad="Ahmet Yılmaz" meslek="Mimar" [yas]="42"></app-kullanici-karti>

Dikkat edelim: ad="Sem Göksu" düz string olarak geçer ama [yas]="35" köşeli parantezle geçtiğinde Angular bunu TypeScript expression olarak değerlendirir, yani sayı olarak gelir. Bu property binding konusunun girişi.

Component'ten Dışarı Olay Göndermek: @@Output
Bazen child component üst component'e bir şey söylemek ister. Örneğin bir silme butonu tıklandığında ana sayfanın bundan haberi olsun. Bunun için @@Output ve EventEmitter kullanıyoruz:

import { Component, Input, Output, EventEmitter } from '@@angular/core';

@@Component({
  selector: 'app-kullanici-karti',
  standalone: true,
  template: `
    <div>
      <h3>{{ ad }}</h3>
      <button (click)="sil()">Sil</button>
    </div>
  `
})
export class KullaniciKartiComponent {
  @@Input() ad = '';
  @@Input() id = 0;
  @@Output() silindi = new EventEmitter<number>();

  sil() {
    this.silindi.emit(this.id);
  }
}

Üst component'te ise:

<app-kullanici-karti
  [ad]="kullanici.ad"
  [id]="kullanici.id"
  (silindi)="kullaniciSilindi($event)">
</app-kullanici-karti>

Böylece kullanıcı silme butonuna tıkladığında üst component'teki kullaniciSilindi metodu, silinecek kullanıcının ID'si ile birlikte tetikleniyor.

Özet
Bu makalede Angular component yapısının ne olduğunu, CLI ile nasıl ürettiğimizi, @@Input ile veri geçmeyi ve @@Output ile dışarıya olay göndermeyi gördük. Bir sonraki yazıda Data Binding'i — yani interpolation, property binding, event binding ve two-way binding — detaylıca inceleyeceğiz. Başka bir makalede görüşmek üzere...