Angular’da Pipe’lar: Kullan\u0131m ve \u00d6rnekler<\/p>\n
Merhaba, ben Fatih Soysal ve bug\u00fcn sizlere Angular’da pipe’lar\u0131n ne oldu\u011funu ve nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde anlataca\u011f\u0131m. Pipe’lar, Angular uygulamalar\u0131n\u0131zda verileri formatlamak ve g\u00f6r\u00fcnt\u00fclemek i\u00e7in kullanabilece\u011finiz g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. \u00d6rne\u011fin, bir tarih de\u011ferini belirli bir formatta g\u00f6stermek veya bir say\u0131y\u0131 para birimine d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in pipe’lar\u0131 kullanabilirsiniz. Bu sayede kodunuz daha temiz ve okunabilir hale gelir.<\/p>\n
Angular’da pipe’lar, verileri d\u00f6n\u00fc\u015ft\u00fcrmek ve formatlamak i\u00e7in kullan\u0131lan \u00f6zel fonksiyonlard\u0131r. Bir pipe’\u0131, \u015fablon dosyan\u0131zda, de\u011fi\u015fkenin ard\u0131ndan | i\u015fareti ve pipe’\u0131n ad\u0131 ile kullanabilirsiniz. \u00d6rne\u011fin, bir tarih de\u011ferini “dd\/MM\/yyyy” format\u0131nda g\u00f6stermek i\u00e7in Angular, bir\u00e7ok kullan\u0131\u015fl\u0131 yerle\u015fik pipe ile birlikte gelir. Bunlardan baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n Bu pipe’lar, uygulamalar\u0131n\u0131za i\u015flevsellik katman\u0131n h\u0131zl\u0131 ve kolay bir yoludur. Ayr\u0131ca, kodunuzun daha okunabilir ve bak\u0131m\u0131 daha kolay olmas\u0131n\u0131 sa\u011flarlar.<\/p>\n Angular’\u0131n yerle\u015fik pipe’lar\u0131 ihtiya\u00e7lar\u0131n\u0131z\u0131 kar\u015f\u0131lamayabilir. Bu durumda, kendi \u00f6zel pipe’lar\u0131n\u0131z\u0131 olu\u015fturabilirsiniz. Bu, uygulaman\u0131z\u0131n belirli gereksinimlerine g\u00f6re verileri i\u015flemenizi sa\u011flar. \u00d6zel bir pipe olu\u015fturmak i\u00e7in, Bu \u00f6rnekte, bir diziyi filtrelemek i\u00e7in bir pipe olu\u015fturduk. Bu pipe, Pipe’lar\u0131 \u015fablonunuzda kullanmak olduk\u00e7a basittir. Bir pipe’\u0131 kullanmak i\u00e7in, pipe’\u0131n ad\u0131n\u0131 de\u011fi\u015fkenin ard\u0131ndan | i\u015faretiyle belirtmeniz yeterlidir. Birden fazla pipe kullanabilirsiniz, bu pipe’lar soldan sa\u011fa do\u011fru s\u0131rayla uygulan\u0131r.<\/p>\n \u00d6rne\u011fin, bir tarih de\u011ferini formatlamak ve ard\u0131ndan b\u00fcy\u00fck harflere d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in \u015fu kodu kullanabilirsiniz:<\/p>\n Angular’da pipe’lar, verileri formatlamak ve g\u00f6r\u00fcnt\u00fclemek i\u00e7in g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 ara\u00e7lard\u0131r. Hem Angular’\u0131n yerle\u015fik pipe’lar\u0131n\u0131 hem de kendi \u00f6zel pipe’lar\u0131n\u0131z\u0131 kullanarak uygulamalar\u0131n\u0131z\u0131n okunabilirli\u011fini ve i\u015flevselli\u011fini art\u0131rabilirsiniz. Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz. Ayr\u0131ca, Angular resmi dok\u00fcmanlar\u0131na da g\u00f6z atman\u0131z\u0131 \u00f6neririm. Bu dok\u00fcmanlar, pipe’lar hakk\u0131nda daha detayl\u0131 bilgi edinmenize yard\u0131mc\u0131 olacakt\u0131r. Angular Pipe Dok\u00fcmanlar\u0131<\/a> <\/p>\n #Etiketler: Angular, Pipe, Pipe Kullan\u0131m\u0131, Angular Pipe \u00d6rnekleri, Veri Formatlama, \u00d6zel Pipe Olu\u015fturma, Angular Tutorial, Fatih Soysal, Angular Pipe Transform, Date Pipe, Currency Pipe, Yerle\u015fik Pipe’lar<\/p>\n","protected":false},"excerpt":{"rendered":"Angular’da Pipe’lar: Kullan\u0131m ve \u00d6rnekler Merhaba, ben Fatih Soysal ve bug\u00fcn sizlere Angular’da pipe’lar\u0131n ne oldu\u011funu ve nas\u0131l…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-14900","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\ndate<\/code> pipe’\u0131n\u0131 kullanabilirsiniz. Bu pipe’lar, Angular’\u0131n yerle\u015fik pipe’lar\u0131 veya kendinizin geli\u015ftirdi\u011fi \u00f6zel pipe’lar olabilir.<\/p>\nAngular’\u0131n Yerle\u015fik Pipe’lar\u0131<\/h2>\n
\n
date<\/code>: Tarih de\u011ferlerini formatlar. \u00d6rnek: {{ tarihDegeri | date:'dd\/MM\/yyyy' }}<\/code><\/li>\ncurrency<\/code>: Say\u0131 de\u011ferlerini para birimine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u00d6rnek: {{ fiyat | currency:'TRY' }}<\/code><\/li>\nuppercase<\/code>: Metni b\u00fcy\u00fck harflere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u00d6rnek: {{ metin | uppercase }}<\/code><\/li>\nlowercase<\/code>: Metni k\u00fc\u00e7\u00fck harflere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u00d6rnek: {{ metin | lowercase }}<\/code><\/li>\njson<\/code>: JSON nesnelerini bi\u00e7imlendirilmi\u015f bir \u015fekilde g\u00f6r\u00fcnt\u00fcler. \u00d6rnek: {{ nesne | json }}<\/code><\/li>\nasync<\/code>: Asenkron verileri i\u015fler ve g\u00f6r\u00fcnt\u00fcler. \u00d6rnek: {{ veri$ | async }}<\/code><\/li>\n<\/ul>\nKendi Pipe’lar\u0131n\u0131z\u0131 Olu\u015fturmak<\/h2>\n
@Pipe<\/code> decorator’\u00fcn\u00fc kullanarak bir s\u0131n\u0131f olu\u015fturman\u0131z gerekir.<\/p>\n\nimport { Pipe, PipeTransform } from '@angular\/core';\n\n@Pipe({\n name: 'filtre'\n})\nexport class FiltrePipe implements PipeTransform {\n transform(value: any[], filterString: string): any[] {\n if (!filterString) return value;\n return value.filter(item => item.toLowerCase().includes(filterString.toLowerCase()));\n }\n}\n<\/code><\/pre>\ntransform<\/code> fonksiyonunu kullanarak diziyi filtreler ve sonucu d\u00f6nd\u00fcr\u00fcr. Ard\u0131ndan, bu pipe’\u0131 \u015fablonunuzda kullanabilirsiniz.<\/p>\nPipe’lar\u0131 \u015eablonda Kullanmak<\/h2>\n
\n{{ tarihDegeri | date:'longDate' | uppercase }}\n<\/code><\/pre>\nSonu\u00e7<\/h2>\n