Angular’da @Input ve @Output Değişkenler İle Componentler Arası İletişim

Merhaba,

Günümüz UI mimarilerinin birçoğu, birbirlerinden bağımsız olacak şekilde geliştirilen bileşen(component) yapılanmalarının bir araya gelmesi neticesinde bütünün oluşturulması ve böylece uygulamanın yönetilebilir ve ölçeklendirilebilir parçalardan meydana getirilmesi mantığına dayalı bir yaklaşım benimsemektedirler. Haliyle bu yaklaşımın bayraktarlığını yapan ve birçok mimari yahut kütüphaneye bu konuda ön ayak olan Angular mimarisinde, bütünün parçaları olan componentlerde @Input ve @Output değişkenlerinin nasıl bir rol aldıklarını ve componentler arası iletişimi nasıl sağladıklarını inceleyeceğiz.

İlk olarak kavramsal değerlendirmeyi anlaşılır kılabilmek için öncelikle componentler arası ilişkilendirmeyi ele alarak netleştirmek gerekmektedir. Bunun için bir Angular uygulaması oluşturunuz ve ardından içerisine “A” ve “B” olmak üzere iki adet component ekleyiniz. Ardından “A” componentinin görüntüsünde “B” componentini referans ediniz.
Angular'da @Input ve @Output Değişkenler İle Componentler Arası İletişim

İşte bu ilişki neticesinde terminoloji devreye girmekte ve “A” componentine “Parent Component”, “B” componentine ise “Child Component” denmektedir.
Angular'da @Input ve @Output Değişkenler İle Componentler Arası İletişim

Bu bilgiler eşliğinde artık @Input ve @Output değişkenleri açıklayabiliriz.

@Input
Parent componentten(A) Child componente(B) veri göndermek için kullanılan değişkendir.
‘b.component.ts’ içeriği;

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-b',
  templateUrl: './b.component.html',
  styleUrls: ['./b.component.css']
})
export class BComponent implements OnInit {
  constructor() { }
  @Input() data: string;
  ngOnInit(): void {
    console.log(`A'dan B'ye '${this.data}' değeri gönderilmiştir.`);
  }
}

‘a.component.ts’ içeriği;

<app-b data="Merhaba"></app-b>

Burada görüldüğü üzere “B” componenti içerisindeki @Input data değişkenine attribute kıvamında erişebilmekte ve istediğimiz değeri gönderebilmekteyiz.

Çıktı olarak;
Angular'da @Input ve @Output Değişkenler İle Componentler Arası İletişim

@Output
Child componentten(B) Parent componente(A) veri göndermek için kullanılan değişkendir.
‘b.component.ts’ içeriği;

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-b',
  templateUrl: './b.component.html',
  styleUrls: ['./b.component.css']
})
export class BComponent implements OnInit {
  constructor() { }
  @Output() myevent: EventEmitter<any> = new EventEmitter();
  ngOnInit(): void {
    this.myevent.emit({ message: "Merhaba" });
  }
}

‘a.component.html’ içeriği;

<app-b (myevent)="click($event)"></app-b>

Burada da dikkat edilirse ‘b.component.ts’ içerisinde tanımlanan @Output türündeki “myevent” değişkeni “A” görüntüsü içerisindeki referansında event olarak kullanılabilmekte ve taşıdığı değeride ‘$event’ parametresiyle yakalayabilmektedir.

‘a.component.ts’ içeriği;

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

@Component({
  selector: 'app-a',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.css']
})
export class AComponent implements OnInit {
  constructor() { }
  ngOnInit(): void { }

  click(data) {
    console.log(`B'den A'ya ${data.message} nesnesi gönderilmiştir.`);
  }
}

Angular'da @Input ve @Output Değişkenler İle Componentler Arası İletişim

@Input ve @Output yapılanmasının yukarıda pratik olarak ele aldığımız çalışma mantığını aşağıdaki görselde daha da somutlaştırarak inceleyebilirsiniz.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. Gençay dedi ki:

    Ekstra olarak;

    Yukarıda ele aldığımız ‘a.component.html’ dosyasının içeriğini gösteren

    <app-b data="Merhaba"></app-b>
    

    kod bloğunda ilgili data değeri .ts tarafından bir değişken vasıtasıyla gelecekse eğer ilgili parametreyi köşeli paranteze almanız yeterli olacaktır.

    <app-b [data]="value"></app-b>
    

    Kolay gelsin…

  2. AGİT YILDIZ dedi ki:

    Elinize sağlık

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*