Angular Routerlink ile Birden Fazla Parametre Gönderme

@Input() Nedir?

@Input(), Angular’da bir üst bileşenden (parent) alt bileşene (child) veri aktarımını sağlayan bir dekoratördür.

Bu yapı sayesinde uygulama içerisinde component veri paylaşımı kolay ve sürdürülebilir hale gelir.

Child component birden fazla @Input() alabilir ve bu veriler string, number, array veya object olabilir.

1. Parent Component Oluşturma

İlk adımda parent component içerisinde child’a gönderilecek verileri tanımlarız.

// parent.component.ts
export class ParentComponent implements OnInit {
  isim: string | undefined;
  adresList: Adres[] = [];
}
      

2. Parent HTML ile Child’a Veri Gönderme

Parent HTML içerisinde child component çağrılır ve property binding ile veri aktarılır.

<!-- parent.component.html -->
<app-child 
  [isim]="isim"
  [adresList]="adresList">
</app-child>
      

Köşeli parantezler [], Angular’da veri bağlamayı ifade eder.

3. Child Component’te @Input() Kullanımı

Child component içerisinde parent’tan gelen veriler @Input() ile tanımlanır.

// child.component.ts
export class ChildComponent implements OnInit {
  @Input() isim: string | undefined;
  @Input() adresList: Adres[] = [];
}
      

4. Child HTML İçinde Verileri Görüntüleme

Child HTML dosyasında artık parent’tan gelen verileri görüntüleyebiliriz.

<!-- child.component.html -->
<h3>İsim: {{ isim }}</h3>
<ul>
  <li *ngFor="let adres of adresList">
    {{ adres }}
  </li>
</ul>
      

Angular template syntax sayesinde veriler dinamik olarak ekrana basılır.

@Input() Avantajları

• Component’ler arası veri aktarımını kolaylaştırır
• Kodun yeniden kullanılabilirliğini artırır
• Temiz ve modüler mimari sağlar

Sonuç

Angular @Input() kullanımı ile parent component’ten child component’e veri aktarmak oldukça kolaydır.

Bu yapı, büyük ölçekli Angular projelerinde daha düzenli ve sürdürülebilir bir mimari kurmanıza yardımcı olur.