Angular Component’ler arası veri paslama

Angular uygulamalarımızı "separation of concerns" ilkesine uygun olarak kurgulayıp, birden çok component’ e ayırdığımızda en çok ihtiyaç duyduğumuz şey component’ ler arası veri paslamak olacaktır.

Uygulamamızın herhangi bir component’ inde herhangi bir kaynaktan veri alacak ve bu verinin bir kısmının veyahut tamamının başka component’ lerde işlenmesini sağlayacağız.

Örneğin; Kategori sayfamızı sunan Kategori Component’ e girdiğimizde, ilgili kategorinin içerikleri bir kaynaktan elde edilecek, lakin ilgili içeriklerin her birinin işlenmesi, sunumu için post component vb. gibi bir başka component’ i kullanacağız.

Bu sebeple bu içerikte, Category ve Product Widget component lerini içeren basit bir uygulama yapıyoruz.

Uygulamanın canlı hali;

Category ve Product Widget Component’ leri oluşturuyoruz;

ng g c category
ng g c product-widget

Category Component

Kategorimizde listelemek üzere ürünler olması gerekiyor. Şimdilik bu ürünleri bir dizi içerisinde tanımlıyoruz;

products = [
    {
      name: 'Blue-purple bouquet',
      designedBy : 'Kadir'
    },
    {
      name: 'Amsterdam Roses',
      designedBy : 'Beyazlı'
    }
  ];

Kategorimizin ismini de name değişkeninde tutuyoruz;

name = 'Çiçek kategorisi';

App.Component.html template’ i içerisine, CategoryComponent’ in selector’ ünü ekliyoruz ki, anasayfamızda varlık göstersin;

<div class="container">

<app-category>

</app-category>

</div>

Category Component’ in template’ ini oluşturmaya başlıyoruz. Kategori sayfasında kategorinin ismi ve kategorideki ürünler olmalı.

category.component.html template’in de öncelikle ismi basalım Kİ gerçek hayatta bu isim HTTP request ile elde edilir;

<h1>
    {{name}}
</h1>

Ardından, her ürünün gösterimini sağlayacak olan product widget component’ in selector’ ünü ngFor directive’ i ile ekliyoruz;

<app-product-widget *ngFor="let product of products">

</app-product-widget>

Şuanda 2 adet ürün için loop dönüyor ve ekrana template basılıyor, lakin her bir product’ ı halen ilgili product-widget component’ e iletmiş değiliz.

Angular’ da component’ lere veri paslamak için "Input" kütüphanesini kullanıyoruz.

Öncelikle app-product-widget selector’ ün de product varlığını bir attribute olarak tanımlamalıyız;

<div class="row">

<app-product-widget *ngFor="let product of products" 
[product] = "product"
>

</app-product-widget>

</div>

[product] = "product" şeklinde, her bir product’ ı, app-product-widget’ ın product attribute’ ü olarak tanımladık.

Product Widget Component

Input kütüphanesini kullanabilmek için öncelikle import ediyoruz;

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

Component’ in içinde ise, Input decorator ile, ilgili attribute’ ü tanımlıyoruz;

export class ProductWidgetComponent implements OnInit {

  @Input() product;

  constructor() { }

  ngOnInit() {
  }

}

"@Input() product;" tanımlaması sayesinde, artık componentimiz product attribute’ ü input alabiliyor.

Şimdi ise, artık eriştiğimiz product objesini, product widget component’ in template’ in de map edelim;

<div class="col-xs-4">
    <h3>{{product.name}}</h3>
    <span>{{product.designedBy}}</span>
</div>

Sonuç;