<\/div>\n
Merhaba,<\/p>\n
Bir \u00f6nceki Angular 4 Uygulamalar\u0131nda Built-in Pipes \u0130le \u00c7al\u0131\u015fmak<\/a> ba\u015fl\u0131kl\u0131 makalemizde Angular 4 uygulamalar\u0131nda dahili pipeslara de\u011finmi\u015ftik. Bu i\u00e7eri\u011fimizde ise kendi ihtiyac\u0131m\u0131za istinaden \u00f6zel olu\u015fturaca\u011f\u0131m\u0131z Custom Pipes yap\u0131lar\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n
Angular projesinde Custom Pipe olu\u015fturabilmek i\u00e7in “Integrated Terminal” penceresinde a\u015fa\u011f\u0131daki g\u00f6r\u00fcnt\u00fcde oldu\u011fu gibi generate komutu vermemiz gerekmektedir.
\n $\"Angular$ <\/a><\/p>\n
Olu\u015fturdu\u011fumuz pipe i\u00e7eri\u011fini incelersek e\u011fer;<\/p>\n
\r\nimport { Pipe, PipeTransform } from '@angular\/core';\r\n@Pipe({\r\n  name: 'product'\r\n})\r\nexport class ProductPipe implements PipeTransform {\r\n  transform(value: any, args?: any): any {\r\n    return null;\r\n  }\r\n}\r\n<\/pre>\nDikkat ederseniz; bir class\u0131n pipe olabilmesi i\u00e7in “@Pipe” deklarasyonundan beslenmesi ve “PipeTransform” interfaceini implemente ediyor olmas\u0131 gerekmektedir. “PipeTransform” interfacei “transform” isminde bir metodu uygulatmaktad\u0131r. \u0130\u015fte bu metot sayesinde, olu\u015fturaca\u011f\u0131m\u0131z bu custom pipe’in kullan\u0131laca\u011f\u0131 de\u011fer \u00fczerinde bir de\u011fersel d\u00f6n\u00fc\u015f\u00fcm ger\u00e7ekle\u015ftirece\u011fiz. Ayr\u0131ca bu pipe’\u0131 \u00e7a\u011f\u0131rabilmek i\u00e7in “@Pipe” deklarasyonu i\u00e7erisinde “name” \u00f6zelli\u011fine “product” ismi verilmi\u015ftir. Buraya hangi ismi belirtirseniz o isimle \u00e7a\u011f\u0131rabilirsiniz.<\/p>\n
“transform” metodunu daha detayl\u0131 inceleyebilmek i\u00e7in a\u015fa\u011f\u0131ya alal\u0131m.<\/p>\n\r\n  transform(value: any, args?: any): any {\r\n    return null;\r\n  }\r\n<\/pre>\n“value” parametresi, bu pipe’\u0131n uygulanaca\u011f\u0131 de\u011feri bize getirecekken, “args” parametresi ise pipe’a verilebilecek parametreleri elde etmemizi sa\u011flayacakt\u0131r. Haliyle burada yap\u0131lan t\u00fcm de\u011fi\u015fiklikler ilgili de\u011fer yerine yans\u0131t\u0131lacak ve bu \u015fekilde filtreleme i\u015flemi ger\u00e7ekle\u015ftirilmi\u015f olacakt\u0131r.<\/p>\n
\u015eimdi gelin bu pipe’\u0131 say\u0131sal de\u011ferler \u00fczerinde kullan\u0131labilir hale getirelim. Mesele bir product nesnesinin fiyat\u0131n\u0131 %18 KDV eklenmi\u015f hale getiren i\u015flevsellikte in\u015fa etmemiz isminede uygun olacakt\u0131r.<\/p>\n\r\nimport { Pipe, PipeTransform } from '@angular\/core';\r\n@Pipe({\r\n  name: 'product'\r\n})\r\nexport class ProductPipe implements PipeTransform {\r\n  transform(value: number, args?: number): number {\r\n    return value + (value * 18 \/ 100);\r\n  }\r\n}\r\n<\/pre>\n\u015eimdi pipe’\u0131 kullanaca\u011f\u0131m\u0131z nesneyi olu\u015ftural\u0131m.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Product } from '..\/entitys\/product';\r\n@Component({\r\n  selector: 'app-product',\r\n  templateUrl: '.\/product.component.html',\r\n  styleUrls: ['.\/product.component.css']\r\n})\r\nexport class ProductComponent implements OnInit {\r\n  product: Product;\r\n  constructor() { }\r\n  ngOnInit() {\r\n    let product = new Product();\r\n    product.price = 1000;\r\n    this.product = product;\r\n  }\r\n}\r\n<\/pre>\nVe \u015fimdide olu\u015fturdu\u011fumuz pipe’\u0131 uygulayal\u0131m.<\/p>\n\r\n{{product.price | product}}\r\n<\/pre>\nEkran \u00e7\u0131kt\u0131s\u0131 : “1180”<\/p>\n
Angular 4 uygulamalar\u0131nda Custom Pipes yap\u0131lar\u0131n\u0131n nas\u0131l in\u015fa edildi\u011fini g\u00f6rm\u00fc\u015f olduk. Art\u0131k bu \u00f6\u011frendiklerimizle bir liste \u00fczerinde filtreleme i\u015flemini \u00f6rneklendirelim ve ard\u0131ndan makalemizi noktalayal\u0131m.<\/p>\n
Listelemede kullanaca\u011f\u0131m\u0131z entity s\u0131n\u0131f\u0131m\u0131z;<\/p>\n\r\nexport class Product {\r\n    productName: string;\r\n    introduction: string;\r\n    code: number;\r\n    stock: number;\r\n    price: number;\r\n}\r\n<\/pre>\nVeri k\u00fcmemiz;<\/p>\n\r\nimport { Product } from ".\/product";\r\nexport const ProductList: Product[] = [\r\n    { productName: "Kalem", code: 10150, introduction: "...", price: 500, stock: 1000 },\r\n    { productName: "Silgi", code: 10160, introduction: "...", price: 250, stock: 1000 },\r\n    { productName: "Defter", code: 10170, introduction: "...", price: 1500, stock: 500 },\r\n    { productName: "Tahta Kalemi", code: 10180, introduction: "...", price: 250, stock: 250 },\r\n    { productName: "\u015eeffaf Dosya", code: 10190, introduction: "...", price: 10, stock: 150 },\r\n    { productName: "Kalem Tra\u015f", code: 10200, introduction: "...", price: 50, stock: 4000 },\r\n    { productName: "Tahta Silgisi", code: 10210, introduction: "...", price: 500, stock: 150 }\r\n];\r\n<\/pre>\nCustom Pipe’\u0131m\u0131z;<\/p>\n\r\nimport { Pipe, PipeTransform } from '@angular\/core';\r\nimport { Product } from '..\/entitys\/product';\r\n@Pipe({\r\n  name: 'product'\r\n})\r\nexport class ProductPipe implements PipeTransform {\r\n  transform(value: Product[], filterText?: string): Product[] {\r\n    return filterText ? value.filter((p: Product) => p.productName.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) != -1) : value;\r\n  }\r\n}\r\n<\/pre>\nDikkat ederseniz e\u011fer bir veri k\u00fcmesi \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131ndan dolay\u0131 “Product[]” dizisi tipinden “value” parametresinde \u00e7al\u0131\u015fmaktay\u0131z. Ayr\u0131ca pipe kullan\u0131l\u0131rken string tipte bir parametre alacakt\u0131r ve o parametre de\u011ferini burada “filterText” isimli parametre ile yakalamaktay\u0131z.<\/p>\n
\u015eimdi veri k\u00fcmemizi listeleyelim ve ard\u0131ndan ilgili liste \u00fczerinde pipe’\u0131m\u0131z\u0131 kullanal\u0131m.<\/p>\n\r\n<input type="text" [(ngModel)]="filterText"\/>\r\n\r\n<table style="width: 550px;">\r\n  <thead>\r\n    <tr>\r\n      <th>Product Name<\/th>\r\n      <th>Introduction<\/th>\r\n      <th>Code<\/th>\r\n      <th>Stock<\/th>\r\n      <th>Price<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr style="text-align: center;" *ngFor="let product of productList | product : filterText">\r\n      <td>{{product.productName}}<\/td>\r\n      <td>{{product.introduction}}<\/td>\r\n      <td>{{product.code}}<\/td>\r\n      <td>{{product.stock}}<\/td>\r\n      <td>{{product.price}} ({{product.price | product}}+KDV)<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<\/pre>\nYap\u0131lan bu \u00e7al\u0131\u015fmalar neticesinde uygulamay\u0131 kaydedip yay\u0131nlad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi bir i\u015flevsellikle kar\u015f\u0131la\u015faca\u011f\u0131z.
\n<\/a><\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bir \u00f6nceki Angular 4 Uygulamalar\u0131nda Built-in Pipes \u0130le \u00c7al\u0131\u015fmak ba\u015fl\u0131kl\u0131 makalemizde Angular 4 uygulamalar\u0131nda dahili pipeslara de\u011finmi\u015ftik. Bu i\u00e7eri\u011fimizde ise kendi ihtiyac\u0131m\u0131za istinaden \u00f6zel olu\u015fturaca\u011f\u0131m\u0131z Custom Pipes yap\u0131lar\u0131n\u0131 ele alaca\u011f\u0131z. Angular projesinde Custom...<\/p>\n","protected":false},"author":1,"featured_media":7898,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2333,2332,2334,2331,2335],"class_list":["post-7884","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-custom-pipes","tag-angular-4-ile-custom-pipes","tag-angular-4-ile-custom-pipes-olusturmak","tag-custom-pipes","tag-pipetransform"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7884"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7884\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7898"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}