Angular Routerlink ile Birden Fazla Parametre Gönderme

Bu yazımızda, Angular @Input() nedir sorusuna yanıt verecek ve parent component’ten child component’e veri aktarımı konusunu adım adım öğreneceğiz. Angular @Input() kullanımı, component’ler arası veri paylaşımının en basit yollarından biridir.

@Input() Nedir?

@Input() dekoratörü, Angular’da bir üst bileşenden (Parent Component) alt bileşene (Child Component) veri aktarımına olanak tanır. Bu yöntem sayesinde, uygulama içinde component veri paylaşımı sağlanır.

Bir alt bileşen birden fazla giriş alanına sahip olabilir ve bu alanlar farklı türlerde olabilir (string, number, object, array vb.). Böylece karmaşık verileri bile kolayca child component’e gönderebilirsiniz.

1. Adım: Parent Component Oluşturma

İlk olarak bir ParentComponent oluşturuyoruz. Burada isim ve adresList verilerini child component’e göndereceğiz.

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

2. Adım: Parent HTML Üzerinden Child’a Veri Gönderme

Parent component HTML dosyasında, <app-child> etiketiyle child component çağrılır. Angular input örneği olarak, parent verilerini aşağıdaki gibi child’a iletebiliriz:

<app-child 
  [isim]="isim"
  [adresList]="adresList">
</app-child>

Burada köşeli parantezler ([]) veri bağlamayı temsil eder. Bu şekilde parent verileri child component’e aktarılır.

3. Adım: Child Component’te Verileri Tanımlama

Child component içinde, parent’tan gelen veriler @Input() dekoratörüyle tanımlanır:

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

4. Adım: Child HTML İçinde Verileri Görüntüleme

Artık child component HTML dosyasında parent’tan gelen verileri görüntüleyebiliriz:

<h3>İsim: {{ isim }}</h3>
<ul>
  <li *ngFor="let adres of adresList">{{ adres }}</li>
</ul>

Bu şekilde, parent component’ten gelen tüm veriler child tarafında dinamik olarak görüntülenir.

Sonuç

Angular @Input() kullanımı ile parent child veri aktarımı sağlamak oldukça kolaydır. Bu yapı, uygulama mimarisini düzenli hale getirir ve component’ler arası etkileşimi artırır.

Benzer konular ve daha fazla Angular component veri paylaşımı örnekleri için web sitemizi ziyaret edebilirsiniz.

İyi çalışmalar!
latestsoftwaredevelopers.com