Angular 4 Component Data Paylaşımı 26.12.2017

Merhaba arkadaşlar, sizlere angular 4 'te parent component'den child'a nasıl data aktarırız bunu bir örnekle göstereceğim,

Parent: LoginComponent

Child: LoginformComponent

Parent -> Child

1.) Input interface ini child component'e dahil ediyoruz

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

2.) Child component'te alınacak data için bir değişken oluşuruyoruz

 @Input() validateForm:boolean;

3.) View kısmında child component neredeyse orada bu değişkeni parametre olarak yazıyoruz ve parent'taki değerine bağlıyoruz

<app-loginform [validateForm]="validateForm"></app-loginform>

4.) Son olarak parent component'inde bir değer atıyoruz ve child component'te bu değere erişebiliyoruz.

// pass validateForm value to child component
this.validateForm = false;
// get validate or not value from parent
if(this.validateForm){
console.log(this.validateForm);
}

 

Child->Parent

1.) Output ve EventEmitter interface lerini child component'e dahil ediyoruz

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

2.) parent'a gönderilecek datayı yeni bir custom event olarak atıyoruz

@Output() outputLoginForm:any = new EventEmitter();

3.) Child component'de data gönderimi için bir fonksiyon oluşturuyoruz ve göndermek istediğimiz datayı event objesine giriyoruz

sendLoginData(): void {

this.fields.agency = this.agency;
this.fields.username = this.username;
this.fields.password = this.password;

// console.log(this.agency);
this.outputLoginForm.emit(this.fields);
}

4.) Yine parent'ın ulaşabilmesi için child component html template'inde nerede kullanıldıysa oraya bu eventi ve parent'ın bu event'e üye olabileceği fonksiyonu yazıyoruz

<app-loginform [validateForm]="validateForm" (outputLoginForm)="doLogin($event)"></app-loginform>

Parent metodu

doLogin($event){
this.params = $event;
console.log(this.params);
}

Şimdilik bu kadar, sevgiler :)