Angular Componentler Arası İletişim

Angular Input & Output

Merhaba , bu yazımızda Angular ile @Input ve @Output kullanarak componentler arası iletişimi nasıl kurabileceğimizden bahsediyor olacağız.

Örneğimizde parent componentten bir sayıyı child componente iletip, child componentten her tıklamadada parent componente ilgili tıklamayı paremetre ile iletiyor olacağız.

@Input: Parent componentten child componente veri göndermek için kullanılır.

@Output:Child componentteki bilgiyi parent componente aktarmak için kullanılır.

Yapılandırma ;

Öncelikle ihtiyacımız olan Parent ve Child componentlerini olusturalım.

ng g c components/parent
ng g c components/child

Parent Componentini aşağıdaki gibi düzenleyelim;

<div>
  <h1>Parent Component</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices nibh a fringilla mattis. Donec posuere tincidunt urna, eget vestibulum libero ornare quis. Vivamus laoreet lobortis sagittis. Maecenas urna nulla, auctor consectetur sem dignissim.
  </p>

  <app-child></app-child>

</div>

Child Componentini aşağıdaki gibi düzenleyelim;

<div>
    <span>Child Component 100 </span>
</div>

İlgili componentleri oluşturduktan sonra şimdi de @Input ve @Output ile bu iki bileşen arasındaki iletişimi sağlayalım;

child.component.ts aşağıdaki gibi düzenleyelim;

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

  @Input() count: number = 0;
  @Output() changeCount= new EventEmitter<number>();

  change() {
    this.changeCount.emit(1);
  }

child componentin html içeriğini aşağıdaki gibi düzenleyelim;

<div >
    <span (click)="change()">{{ count}}</span>
</div>

parent.component.ts içeriğini düzenleyelim;

count:number = 10;
changeCount(num:number){    this.count+=num }

parent componentin html içeriğini düzenleyelim;

<div>
  <h1>Parent Component</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices nibh a fringilla mattis. Donec posuere tincidunt urna, eget vestibulum libero ornare quis. Vivamus laoreet lobortis sagittis. Maecenas urna nulla, auctor consectetur sem dignissim.
  </p>

  <app-child [count]='count' (changeCount)='changeCount($event)'></app-child>

</div>

artık child component ve parent component arasındaki iletişimi sağladık , parent component her count değerini child component’e iletiyor child component ise tıklanılan her bilgili parent’a iletip sayıyı güncelleyip tekrardan child componentine iletiyor.

Youtube Kanalım.

Herkese İyi Çalışmalar Dilerim.