<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde, Angular uygulamalar\u0131nda elimizdeki veriler \u00fczerinde belirli filtreleme i\u015flemleri uygulamam\u0131za yarayan Built-in Pipes yap\u0131lar\u0131n\u0131 inceleyece\u011fiz. Mimariye dahili bir yap\u0131sall\u0131kla kar\u015f\u0131m\u0131za \u00e7\u0131kan bu filtrelerin d\u0131\u015f\u0131nda ayriyetten bir ba\u015fka makalemizde Custom Pipes yap\u0131lar\u0131 \u00fczerinede konu\u015faca\u011f\u0131z.<\/p>\n
\u0130lk olarak Pipes yap\u0131lar\u0131n\u0131n de\u011ferler \u00fczerinde nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair de\u011finmemiz gerekirse e\u011fer;<\/p>\n
\r\nvalue | pipe\r\n<\/pre>\nyukar\u0131daki prototipte g\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere de\u011ferden hemen sonra belirtilen “|” karakterinin ard\u0131ndan ilgili filtrelemede bulunacak pipe hangisiyse belirtmemiz yeterli olacakt\u0131r.<\/p>\n
Ayr\u0131ca bir Pipe’ye parametre girilmesi gerekiyorsa e\u011fer a\u015fa\u011f\u0131daki prototipte oldu\u011fu gibi hareket edilmesi gerekmektedir;<\/p>\n
\r\nvalue | pipe : 'parametre1' : 'parametre2' : ...\r\n<\/pre>\n\u015eimdi elden geldi\u011fince mevcut Pipe keywordlerini a\u015fa\u011f\u0131da tek tek ele alal\u0131m.<\/p>\n
Pipes<\/h4>\n\ndate<\/strong>
\nTarihsel veriler \u00fczerinde formatland\u0131rma \u00e7al\u0131\u015fmalar\u0131 i\u00e7in kullan\u0131lan bir filtredir.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-pipe',\r\n  templateUrl: '.\/pipe.component.html',\r\n  styleUrls: ['.\/pipe.component.css']\r\n})\r\nexport class PipeComponent implements OnInit {\r\n  today: Date = new Date();\r\n  constructor() { }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131da tan\u0131mlanm\u0131\u015f “today” de\u011fi\u015fkeni \u00fczerinde deneylerimizi ger\u00e7ekle\u015ftirirsek e\u011fer;<\/p>\n
\r\n{{today}}\r\n<\/pre>\npipe kullanmadan kar\u015f\u0131m\u0131za “Tue May 01 2018 15:49:30 GMT+0300 (T\u00fcrkiye Standart Saati)” \u015feklinde bir sonu\u00e7la \u00e7\u0131kmaktad\u0131r.<\/p>\n
\r\n{{today | date}}\r\n<\/pre>\n“date” filtresini uygularsak e\u011fer tarihsel verimiz “May 1, 2018” \u015feklinde formatland\u0131r\u0131lacakt\u0131r.<\/p>\n
\r\n{{ today | date : "MM\/dd\/yy" }}\r\n<\/pre>\nBir yandan yukar\u0131da oldu\u011fu gibi parametrik olarak tarihsel verimizi daha da \u00f6zel bir \u015fekilde formatland\u0131rabilmekteyiz. Bu \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda sonucu “05\/01\/18” \u015feklinde ekrana basacakt\u0131r.<\/p>\n
Vee di\u011fer parametreleri incelersek e\u011fer;<\/p>\n
\r\n{{ today | date : "shortDate"  }}\r\n<\/pre>\nEkran \u00e7\u0131kt\u0131s\u0131 : “5\/1\/18”<\/p>\n
\r\n{{ today | date : "fullDate"  }}\r\n<\/pre>\nEkran \u00e7\u0131kt\u0131s\u0131 : “Tuesday, May 1, 2018 “<\/li>\n
uppercase<\/strong>
\nMetinsel yap\u0131lardaki t\u00fcm de\u011ferleri b\u00fcy\u00fck harfe \u00e7evirir.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-pipe',\r\n  templateUrl: '.\/pipe.component.html',\r\n  styleUrls: ['.\/pipe.component.css']\r\n})\r\nexport class PipeComponent implements OnInit {\r\n  name: string = "GeN\u00e7Ay Y\u0131LdIz";\r\n  constructor() { }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n\r\n{{name | uppercase}}\r\n<\/pre>\nEkran \u00e7\u0131kt\u0131s\u0131 : “GEN\u00c7AY YILDIZ”<\/li>\n
lowercase<\/strong>
\nMetinsel yap\u0131lardaki t\u00fcm de\u011ferleri k\u00fc\u00e7\u00fck harfe \u00e7evirir.<\/p>\n\r\n{{name | lowercase}}\r\n<\/pre>\nEkran \u00e7\u0131kt\u0131s\u0131 : “gen\u00e7ay y\u0131ld\u0131z”<\/li>\n
currency<\/strong>
\nSay\u0131sal de\u011ferleri para birimine \u00e7evirir ve sembolik de\u011fer katar.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-pipe',\r\n  templateUrl: '.\/pipe.component.html',\r\n  styleUrls: ['.\/pipe.component.css']\r\n})\r\nexport class PipeComponent implements OnInit {\r\n  price: number = 4200;\r\n  constructor() { }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n\r\n{{price | currency}}\r\n<\/pre>\nEkran \u00e7\u0131kt\u0131s\u0131 : “$4,200.00”
\nE\u011fer ki para birimini kendiniz belirlemek isterseniz a\u015fa\u011f\u0131daki gibi parametre vermeniz yeterlidir.<\/p>\n
\r\n{{price | currency : 'TL'}}\r\n<\/pre>\nEkran \u00e7\u0131kt\u0131s\u0131 : “TL4,200.00”
\nE\u011fer ki, s\u0131f\u0131rlar\u0131 ve k\u00fcs\u00fcratlar\u0131 ayarlamak istiyorsan\u0131z da a\u015fa\u011f\u0131daki gibi parametrik \u00e7al\u0131\u015fman\u0131z yeterlidir.<\/p>\n
\r\n{{price | currency : "TL" : "symbol" : "6.3"}}\r\n<\/pre>\nBurada, say\u0131sal de\u011feri gerekirse ba\u015f\u0131na s\u0131f\u0131r ekleyerek alt\u0131 haneye \u00e7\u0131karmakta(6<\/span>.3)<\/strong> ve k\u00fcs\u00fcratada \u00fc\u00e7 adet s\u0131f\u0131r eklemektedir(6.3<\/span>)<\/strong>.
\nEkran \u00e7\u0131kt\u0131s\u0131 : “TL004,200.000”\n<\/li>\n
percent<\/strong>
\nSay\u0131sal de\u011ferleri y\u00fczdelik(%) olarak g\u00f6stermemizi sa\u011flar.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-pipe',\r\n  templateUrl: '.\/pipe.component.html',\r\n  styleUrls: ['.\/pipe.component.css']\r\n})\r\nexport class PipeComponent implements OnInit {\r\n  integer: number = 4200;\r\n  constructor() { }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n\r\n{{integer | percent }}\r\n<\/pre>\nEkran \u00e7\u0131kt\u0131s\u0131 : “420,000%”
\nE\u011fer ki say\u0131sal de\u011ferimizi “integer: number = 0.129;” \u015feklinde g\u00fcncellersek “percent” filtresi yuvarlama yapacak ve “13%” de\u011ferini bize sunacakt\u0131r.<\/p>\n
\r\n{{integer | percent : "9.5"}}\r\n<\/pre>\nBu \u015fekilde bir \u00e7al\u0131\u015fma ise “currency” filtresindekiyle ayn\u0131 mant\u0131kta tam say\u0131y\u0131 s\u0131f\u0131rlarla dokuz haneye, k\u00fcs\u00fcrat\u0131 ise 5 haneye \u00e7\u0131karmaya yar\u0131yacakt\u0131r.\n<\/li>\n<\/ul>\n
Angular 4 \u00e7at\u0131s\u0131 alt\u0131nda Built-in Pipes yap\u0131lar\u0131n\u0131 incelemi\u015f olduk. Sonraki yaz\u0131lar\u0131m\u0131zda Custom Pipes konusunu ele alacak ve kendi Pipe yap\u0131m\u0131z\u0131 olu\u015fturaca\u011f\u0131z.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde, Angular uygulamalar\u0131nda elimizdeki veriler \u00fczerinde belirli filtreleme i\u015flemleri uygulamam\u0131za yarayan Built-in Pipes yap\u0131lar\u0131n\u0131 inceleyece\u011fiz. Mimariye dahili bir yap\u0131sall\u0131kla kar\u015f\u0131m\u0131za \u00e7\u0131kan bu filtrelerin d\u0131\u015f\u0131nda ayriyetten bir ba\u015fka makalemizde Custom Pipes yap\u0131lar\u0131 \u00fczerinede...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2320,2328,2321,2319,2080,2084,2082,2327,2326,2323,2325,2329,2324,2322,2083],"class_list":["post-7861","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-built-in-pipes","tag-angular-percent","tag-angular-pipes","tag-built-in-pipes","tag-currency","tag-date","tag-lowercase","tag-percent","tag-pipe-currency","tag-pipe-date","tag-pipe-lowercase","tag-pipe-percent","tag-pipe-uppercase","tag-pipes","tag-uppercase"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7861","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=7861"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7861\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}