Angular 4 İle Custom Pipes Oluşturmak - Yazılım Mimarileri ve Tasarım Desenleri Üzerine

Angular 4 İle Custom Pipes Oluşturmak

Merhaba,

Bir önceki Angular 4 Uygulamalarında Built-in Pipes İle Çalışmak başlıklı makalemizde Angular 4 uygulamalarında dahili pipeslara değinmiştik. Bu içeriğimizde ise kendi ihtiyacımıza istinaden özel oluşturacağımız Custom Pipes yapılarını ele alacağız.

Angular projesinde Custom Pipe oluşturabilmek için “Integrated Terminal” penceresinde aşağıdaki görüntüde olduğu gibi generate komutu vermemiz gerekmektedir.
Angular 4 İle Custom Pipes Oluşturmak

Oluşturduğumuz pipe içeriğini incelersek eğer;

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'product'
})
export class ProductPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return null;
  }
}

Dikkat ederseniz; bir classın pipe olabilmesi için “@Pipe” deklarasyonundan beslenmesi ve “PipeTransform” interfaceini implemente ediyor olması gerekmektedir. “PipeTransform” interfacei “transform” isminde bir metodu uygulatmaktadır. İşte bu metot sayesinde, oluşturacağımız bu custom pipe’in kullanılacağı değer üzerinde bir değersel dönüşüm gerçekleştireceğiz. Ayrıca bu pipe’ı çağırabilmek için “@Pipe” deklarasyonu içerisinde “name” özelliğine “product” ismi verilmiştir. Buraya hangi ismi belirtirseniz o isimle çağırabilirsiniz.

“transform” metodunu daha detaylı inceleyebilmek için aşağıya alalım.

  transform(value: any, args?: any): any {
    return null;
  }

“value” parametresi, bu pipe’ın uygulanacağı değeri bize getirecekken, “args” parametresi ise pipe’a verilebilecek parametreleri elde etmemizi sağlayacaktır. Haliyle burada yapılan tüm değişiklikler ilgili değer yerine yansıtılacak ve bu şekilde filtreleme işlemi gerçekleştirilmiş olacaktır.

Şimdi gelin bu pipe’ı sayısal değerler üzerinde kullanılabilir hale getirelim. Mesele bir product nesnesinin fiyatını %18 KDV eklenmiş hale getiren işlevsellikte inşa etmemiz isminede uygun olacaktır.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'product'
})
export class ProductPipe implements PipeTransform {
  transform(value: number, args?: number): number {
    return value + (value * 18 / 100);
  }
}

Şimdi pipe’ı kullanacağımız nesneyi oluşturalım.

import { Component, OnInit } from '@angular/core';
import { Product } from '../entitys/product';
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  product: Product;
  constructor() { }
  ngOnInit() {
    let product = new Product();
    product.price = 1000;
    this.product = product;
  }
}

Ve şimdide oluşturduğumuz pipe’ı uygulayalım.

{{product.price | product}}

Ekran çıktısı : “1180”

Angular 4 uygulamalarında Custom Pipes yapılarının nasıl inşa edildiğini görmüş olduk. Artık bu öğrendiklerimizle bir liste üzerinde filtreleme işlemini örneklendirelim ve ardından makalemizi noktalayalım.

Listelemede kullanacağımız entity sınıfımız;

export class Product {
    productName: string;
    introduction: string;
    code: number;
    stock: number;
    price: number;
}

Veri kümemiz;

import { Product } from "./product";
export const ProductList: Product[] = [
    { productName: "Kalem", code: 10150, introduction: "...", price: 500, stock: 1000 },
    { productName: "Silgi", code: 10160, introduction: "...", price: 250, stock: 1000 },
    { productName: "Defter", code: 10170, introduction: "...", price: 1500, stock: 500 },
    { productName: "Tahta Kalemi", code: 10180, introduction: "...", price: 250, stock: 250 },
    { productName: "Şeffaf Dosya", code: 10190, introduction: "...", price: 10, stock: 150 },
    { productName: "Kalem Traş", code: 10200, introduction: "...", price: 50, stock: 4000 },
    { productName: "Tahta Silgisi", code: 10210, introduction: "...", price: 500, stock: 150 }
];

Custom Pipe’ımız;

import { Pipe, PipeTransform } from '@angular/core';
import { Product } from '../entitys/product';
@Pipe({
  name: 'product'
})
export class ProductPipe implements PipeTransform {
  transform(value: Product[], filterText?: string): Product[] {
    return filterText ? value.filter((p: Product) => p.productName.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) != -1) : value;
  }
}

Dikkat ederseniz eğer bir veri kümesi üzerinde çalışacağından dolayı “Product[]” dizisi tipinden “value” parametresinde çalışmaktayız. Ayrıca pipe kullanılırken string tipte bir parametre alacaktır ve o parametre değerini burada “filterText” isimli parametre ile yakalamaktayız.

Şimdi veri kümemizi listeleyelim ve ardından ilgili liste üzerinde pipe’ımızı kullanalım.

<input type="text" [(ngModel)]="filterText"/>

<table style="width: 550px;">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Introduction</th>
      <th>Code</th>
      <th>Stock</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr style="text-align: center;" *ngFor="let product of productList | product : filterText">
      <td>{{product.productName}}</td>
      <td>{{product.introduction}}</td>
      <td>{{product.code}}</td>
      <td>{{product.stock}}</td>
      <td>{{product.price}} ({{product.price | product}}+KDV)</td>
    </tr>
  </tbody>
</table>

Yapılan bu çalışmalar neticesinde uygulamayı kaydedip yayınladığımızda aşağıdaki gibi bir işlevsellikle karşılaşacağız.
Angular 4 İle Custom Pipes Oluşturmak

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.