Angular Componentler arası iletişim - @Input ve @Output kullanımı

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.

Mehmet Sert

HTML, CSS, Javascript ve Angular konularında tecrübe edinmiş ve Bursa'da Frontend Developer olarak bir firmada görev almaktayım. Yeni teknolojilere meraklıyım, öğrendiklerimi uygulayarak ve anlatarak pekiştirmeyi seviyorum....

"Angular Componentler arası iletişim - @Input ve @Output kullanımı" için hiç yorum yapılmadı.

Henüz yorum yapılmamış.

Yorum yap * E-posta adresiniz yayınlanmayacak.