Merhabalar arkadaşlar.

Bu yazı içerisinde Angular 2’de Componentler arası veri geçirme konusu olan olan Inputs and Outputs konusunu öğreneceğiz.

Componentler arası veri geçirme olayı üst ve alt component ilişkisi olan componentler arasında yapılıyor arkadaşlar. Biz de yazımıda üst component olan AppComponent ile alt component olan Angular2Tutorials component’i arasında veri taşıma olayına bakacağız.

İlk olarak alt component’den üst component’e veri taşıma olayını örnekleyelim.

tutorials.component.ts

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

@Component({
	selector: 'angular2-tutorials',
	template: `<h2>Child Tutorials Component</h2>
				<label>Enter Child Tutorials Component</label>
				<input type="text">
				<p>Value from Parent AppComponent is</p>
				
				{{parentData}}
				`,
	inputs: [`parentData`]
})

export class Angular2Tutorials{
	public parentData: string;
}

Angular2Tutorials component’imiz az önce de söylediğim gibi bizim altcomponent’imizdir. Angular2Tutorials sınıfının içerisinde template kısmında kullanıcının bir değer gireceği bir input alanı mevcut. Bu input alanını Angular2Tutorials’den AppComponent’e veri taşırken kullanacağız. Yine template kısmında interpolation kullanarak parentData nesnesi template’imize eklenmiş. Burada selector ve template gibi kullanılan yeni bir özellik görüyoruz, o da inputs özelliği. inputs özelliği içerisinde adı verilmiş olan nesnenin tanımlanma işlemi sınıfın içerisinde yapılmış bulunmakta. Angular2Tutorials sınıfı içerisinde string tipinde parentData nesnesinin tanımlandığını görüyoruz ve bu parentData nesnesi inputs özelliğine verilmiş. Bu şu anlama gelir ki, başka bir component içerisinden parentData ismi ile Angular2Tutorials sınıfına veri gönderilebilir ve bu değer sınıf içerisindeki parentData nesnesine işlenir.

app.component.ts

import { Component } from '@angular/core';
import {Angular2Tutorials} from './tutorials.component';

@Component({
  selector: 'my-app',
  template: `<h2>Parent App Component</h2>
				<label>Enter Parent App Component Value</label>
				<input type="text" #ptext (keyup)="0">
				<p>Value from Child TutorialsComponent is</p>
				<angular2-tutorials [parentData]="ptext.value"></angular2-tutorials>`,
  directives:[Angular2Tutorials]
})
export class AppComponent  {}

AppComponent sınıfımız içerisinde template özelliği içerisinde Angular2Tutorials’da olduğu gibi bir input alanı var. Bu input alanı için #ptext ifadesi ile bir referans tanımlaması yapıldı ve (keyup)=”0” ifadesi her tuşa basılıp bırakıldığında değerinin güncellenmesi sağlandı.Template içerisinde angular2-tutorials selector’unu kullanarak Angular2Tutorials component’ini dahil etmiş olduk. angular2-tutorials tag’inin kullanımı sırasında göreceğimiz gibi bir data binding durumu mevcut arkadaşlar. Angular2Tutorials sınıfının parentData nesnesine ptext referanslı input’un değerini göndermiş oluyoruz angular2-tutorials tag’inin kullanımı ile. Bu değer gönderimi ile Angular2Tutorials sınıfının template özelliği içerisindeki inputs alanı değeri karşılayacak ve parentData nesnesine yazacak.

Browser’a gidip baktığımızda ve Parent App Component alanındaki kutucuğa değer girdiğimizde Child Tutorials Component alanında değerin yazdırıldığını görüyoruz.

Şimdi de üst component’den yani AppComponent’den alt component’e yani Angular2Tutorials component’ine nasıl veri geçirilir ona bakalım.

Componentler arasında bir alt-üst ilişkisi olması birbirleri arasında veri transferinin aynı şekilde olmasını engelliyor arkadaşlar. Bu nedenle alt componentden üst component’e veri gönderdiğimiz gibi üst component’den alt component’e veri gönderemiyoruz. Bu iş için inputs özelliği gibi bir de outputs özelliğimiz var. Şimdi nasıl kullanıldığına bakalım:

tutorials.component.ts

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

@Component({
	selector: 'angular2-tutorials',
	template: `<h2>Child Tutorials Component</h2>
				<label>Enter Child Tutorials Component</label>
				<input type="text" #childText (keyup)="onChange(childText.value)">
				<p>Value from Parent AppComponent is</p>
				
				{{parentData}}
				`,
	inputs: [`parentData`],
	outputs: [`childEvent`]
})

export class Angular2Tutorials{
	public parentData: string;
	childEvent = new EventEmitter<string>(); 
	onChange(value:string){
		this.childEvent.emit(value);
	}
}

Angular2Tutorials sınıfı içerisinde outputs özelliğini ona childEvent nesnesini vererek kullandık. Bu childEvent nesnesi EventEmitter tipinde olan bir nesnedir ve EventEmitter’ı biz değer yayması, göndermesi için kullanacağız.

Template özelliği içerisindeki input’a #childText ifadesi ile bir referans ataması yaptık ve (keyup)=”onChange(childText.value)” ifadesi ile bu input içerisinde iken her tuşa basılıp kaldırıldığında onChange metodunun çağırılmasını sağladık. onChange metodunun çağırımı sırasında da ona parametre olan childText referanslı nesnenin değerini gönderdik.

onChange metodunun da yaptığı iş kendisine gelen değeri emit() metodu vasıtası ile yaymaktır arkadaşlar. childEvent nesnesi outputs kısmında kullanıldığı için bu emit metodunun çağırımı ile childEvent’in çağırıldığı yere emit metoduna gelen değer yayılır. Burada biz AppComponent içerisinden childEvent’i tetikleyeceğimiz için çağırıldığı yer AppComponent olacak ve her tuşa basılıp kaldırıldığında değer AppComponent’e döndürülecek.

app.component.ts

import { Component } from '@angular/core';
import {Angular2Tutorials} from './tutorials.component';

@Component({
  selector: 'my-app',
  template: `<h2>Parent App Component</h2>
				<label>Enter Parent App Component Value</label>
				<input type="text" #ptext (keyup)="0">
				<p>Value from Child TutorialsComponent is</p>
				
				{{ childData }}
				
				<angular2-tutorials (childEvent)="childData=$event" [parentData]="ptext.value"></angular2-tutorials>`,
  directives:[Angular2Tutorials]
})
export class AppComponent  {
	public childData : string;
}

AppComponent içerisinde de sınıfın tanım kısmında alt sınıftan gelecek değeri tutacak, string tipinde bir childData nesnesi tanımlıyoruz. Template özelliği içerisinde, angular2-tutorials tag’i içerisinde bir event binding işlemi uyguluyoruz arkadaşlar. Burada childEvent nesnesi EventEmitter tipinde olduğu için onMousOver gibi, keyup gibi childEvent da bizim için bir event’tır ve bu event’a atanan iş childData nesnesine $event gelen değeri basmaktır. $event ile değerin gelmesi childEvent’ın gerçekleştirdiği event’ın döndürdüğü değerdir. Yani childEvent Angular2Tutorials içerisinde emit() event’ını gerçekleştiriyordu ve buradan da gelen değeri yayıyordu. Bu nedenle $event bize emit() fonksiyonunun yaydığı değeri verecektir.

Tekrar browser’a gidip baktığımızda ve Child Tutorials Component alanındaki kutucuğa değer girdiğimizde Parent App Component alanında ilgili değerin yazdığını görüyoruz.

Bu yazıda anlatacağım bu kadar arkadaşlar.

Bir sonraki Angular 2 yazısında görüşene kadar sağlıcakla kalın.

Selam ve Sevgilerimle