1. @Input() Dekoratörü Nedir?

Angular'da veri akışı varsayılan olarak yukarıdan aşağıya (Top-Down) doğru ilerler. Yani ana bileşen (Parent), kendi içinde barındırdığı alt bileşene (Child) veri akıtır. @Input() dekoratörü, Child bileşendeki bir değişkene "Dışarıdan (Parent'tan) veri alabilirsin" yetkisi verir.

Bu veriler basit bir string, bir number veya karmaşık bir object (Örn: Müşteri listesi dizisi) olabilir.

2. Adım 1: Parent Component (Veri Kaynağı) Oluşturma

İlk adımımızda verinin üretildiği veya veritabanından çekildiği ana bileşeni (Parent) hazırlayacağız. Burada Child'a göndereceğimiz isim ve adresList değişkenlerini tanımlıyoruz.

// parent.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  // Child component'e gönderilecek veriler
  isim: string = 'Ahmet Yılmaz';
  adresList: string[] = ['Ankara', 'İstanbul', 'İzmir'];

  ngOnInit(): void {
  }
}

3. Adım 2: Parent HTML'den Child'a Veri Gönderme

Parent bileşenin HTML dosyasında, Child bileşeni çağırırken (render ederken) oluşturduğumuz verileri ona aktarıyoruz. Angular'da bu işleme Property Binding denir ve köşeli parantez [] ile yapılır.

<!-- parent.component.html -->
<div class="parent-container">
  <h2>Burası Parent Component</h2>
  
  <!-- Child bileşeni çağırıyor ve verileri aktarıyoruz -->
  <app-child 
    [gelenIsim]="isim" 
    [gelenAdresListesi]="adresList">
  </app-child>
</div>

4. Adım 3: Child Component'te Veriyi Karşılama

Şimdi alt bileşenimize (Child) geçiyoruz. Dışarıdan gelen bu verileri kabul edebilmek için değişkenlerimizin başına @Input() dekoratörünü eklemek zorundayız.

// child.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  // Parent'tan gelen verileri karşılıyoruz
  @Input() gelenIsim: string | undefined;
  @Input() gelenAdresListesi: string[] = [];

  ngOnInit(): void {
    console.log("Parent'tan gelen isim:", this.gelenIsim);
  }
}

5. Adım 4: Child HTML'de Veriyi Görüntüleme

Son adımda, artık Child bileşenimizin içine başarıyla giren verileri HTML şablonumuzda (Template) gösteriyoruz. Interpolation {{ }} ve *ngFor direktifini kullanacağız.

<!-- child.component.html -->
<div class="child-box" style="border: 2px solid blue; padding: 10px;">
  <h3>Burası Child Component</h3>
  
  <p><strong>Gelen İsim:</strong> {{ gelenIsim }}</p>
  
  <h4>Adresler:</h4>
  <ul>
    <li *ngFor="let adres of gelenAdresListesi">
      {{ adres }}
    </li>
  </ul>
</div>

6. @Input() Kullanımının Avantajları

• Yeniden Kullanılabilirlik (Reusability): Aynı Child bileşenini farklı Parent'lar içinde, farklı @Input() verileri göndererek defalarca kullanabilirsiniz (Örneğin özelleştirilmiş bir Buton veya Kart bileşeni).
• Bakım Kolaylığı: Kodlarınız tek bir devasa (Monolithic) bileşen yerine küçük modüllere bölündüğü için hata tespiti ve bakımı (Maintainability) kolaylaşır.
• Veri İzolasyonu: Verilerin akış yönü net olduğu için sistem mimarisi temiz kalır (Clean Code).

Sonuç

Bu yazımızda, Angular projelerinin iskeletini oluşturan @Input() dekoratörü ile Parent'tan Child'a veri aktarımını baştan sona inceledik. Modern arayüz geliştirme (Frontend) süreçlerinde başarılı olmanın anahtarı, bileşenleri doğru parçalara ayırmak ve aralarındaki bu veri akışını kusursuz yönetmektir.