Merhaba, bu yazıda Angular ile @Input ve @Output kullanarak componentler arası veri gönderme ve işlem yapmayı göreceğiz. Input ve Output nedir? ve nasıl kullanılır? bunları cevaplayarak başlayalım.


Input ve Output kısaca componentler arası bilgi alışverişini sağlayan yapıdır.


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

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


Blog sitesindeki yazıyı alkışlama ve alkış sayısı üzerinden sıfırdan bir örnek yapalım ve bu iki işlemi daha iyi anlayalım;

İki tane component oluşturalım: post-detail ve clap adında.

ng g c components/post-detail
ng g c components/clap


Componentleri oluşturduktan hemen sonra route ayarlamasını yapalım;

app-routing.module.ts

const routes: Routes = [
  {
    path: '', component: PostDetailComponent
  }
]


Şimdi post-detail componentine birkaç paragraf yazı ekleyelim ve clap componenti burada çağıralım;

.post-detail.component.html

<div class="post-detail">
  <h1>Lorem ipsum</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-clap></app-clap>

</div>


clap.component.html

<div class="clap">
  <a>
    <img class="icon" src="https://image.flaticon.com/icons/svg/109/109669.svg">
    <span class="count">1536</span>
  </a>
</div>


clap.component.scss

.clap {
  a {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .3s;
    .icon {
      width: 28px;
      height: 28px;
      margin-right: 10px;
    }
    .count {
      font-weight: 700;
    }
    &:hover {
      padding-left: 3px;
    }
  }
}


Şuana kadarki görüntümüz şu şekilde;


Şimdi geldik @Input ve @Output olaylarına. Burada;

  • Alkış sayısını parent componentten (PostDetailComponent) child componente (ClapComponent) @Input ile göndereceğiz.
  • Alkışlamak için tıkladığımızda ise @Output ile child componentten parent componente bilgi göndereceğiz.


clap.component.ts içerisinde input ve outputları tanımlayalım;

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

  @Input() clapCount: number = 0;
  @Output() changeClap = new EventEmitter();

  clap() {
    this.changeClap.emit();
  }


  • clapCount: alkış sayımızdır, bunu clap.component.html içerisinde yazdıracağız. Tanımlarken 0 değerini verdik çünkü eğer bu veri gönderilmezse varsayılan olarak 0 ı yazdırsın.
  • changeClap: ClapComponent'te alkışa tıklandığı zaman clap() methodunu çalıştıracağız, bu methoddan ise EventEmitter ile parent componente (PostDetailComponent) bu aksiyonu ileteceğiz. Burada istersek veride gönderebiliyoruz .emit(parametre) şeklinde.


clap.component.html'i şu şekilde düzenleyelim;

<div class="clap">
  <a (click)="clap()">
    <img class="icon" src="https://image.flaticon.com/icons/svg/109/109669.svg">
    <span class="count">{{ clapCount }}</span>
  </a>
</div>


PostDetailComponent'e geri dönelim şimdi @Input ile tanımladığımız clapCount'u kullanalım;

<app-clap [clapCount]="15"></app-clap>

Bu tanımlamadan sonra 15 olarak gönderdiğimiz alkış sayısı ekrana yazılmış oluyor.



Ama bunu değişkenden alalım, bunun için post-detail.component.ts de clap adında bir değişken oluşturalım ve html de bu değişken ile gönderelim alkış sayısını;

clap = 15;

post-detail.component.html

<app-clap [clapCount]="clap"></app-clap>

Aynı işlemi yapmış olduk.


Şimdide @Output ile tanımladığımız alkışlamak için tıkladığımızda çalışacak changeClap'ı kullanalım ama önce bu iletişimi karşılayacak methodu yazalım;

post-detail.component.ts;

clickClap() {
  console.log('alkışlandı...');
}

post-detail.component.html

<app-clap [clapCount]="clap" (changeClap)="clickClap()"></app-clap>


Bu tanımlamadan sonra alkışa tıklandığında konsolda alkışlandı... diye yazdığını görüyoruz. Son olarak alkışlandıkça alkış sayısını arttıralım ve bitirelim. Bu işlemi parent componentteki methodumuzda clickClap() da yapıyoruz;

clickClap() {
  console.log('alkışlandı...');
  this.clap++;
}



Bu kadar.



Yaptığımız örneği buradan inceleyebilirsiniz.

Umarım detaylara fazla girip zorlaştırmamışımdır konuyu. Çok basit bir konudur. Sorunuz olursa yorumlarda belirtebilirsiniz.

Teşekkürler.