{"id":253,"date":"2020-11-09T11:25:39","date_gmt":"2020-11-09T08:25:39","guid":{"rendered":"http:\/\/www.etemkeskin.com\/?p=253"},"modified":"2020-11-09T11:25:42","modified_gmt":"2020-11-09T08:25:42","slug":"angular-custom-pipe-kullanimi-2","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-custom-pipe-kullanimi-2\/","title":{"rendered":"Angular Custom Pipe Kullan\u0131m\u0131"},"content":{"rendered":"\n

Angular 2+’ da .html templatelerimizdeki karakter(string), say\u0131 veya tarih gibi verileri formatlama veya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in custom pipe<\/strong> yazabiliriz.<\/p>\n\n\n\n

Bu \u00f6rne\u011fimizde ” Lorem ipsum<\/em>, or lipsum<\/em> as it is sometimes known, is dummy text used in laying out print,” metninin Lorem ks\u0131m\u0131n\u0131 at\u0131p geri kalan\u0131n\u0131 template ‘de g\u00f6stermek i\u00e7in custom pipe yazaca\u011f\u0131z.<\/p>\n\n\n\n

ilk \u00f6nce new-custom.pipe.ts <\/strong>ad\u0131yla bir ts dosyas\u0131 olu\u015fturuyoruz.<\/p>\n\n\n\n

import { PipeTransform, Pipe } from \"@angular\/core\";\n\n@Pipe({ name: 'newCustomPipe' })\nexport class newCustomPipe implements PipeTransform {\n  constructor() {\n  }\n\n  public data:string=null;\n  transform(value:string) :string {    \/\/return type' ta string olarak d\u00f6necek.\n    this.data=value.substring(5);\n    return this.data;\n  }\n}\n\/\/ En basit Custom Pipe \u00f6rne\u011fi. Angular Modulede declarations' a eklemek laz\u0131m.<\/pre>\n\n\n\n
Daha sonra app.module.ts<\/strong> ‘ de custom pipe’ \u0131 tan\u0131ml\u0131yoruz.<\/p>\n\n\n\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { FormsModule } from '@angular\/forms';\nimport { HttpModule } from '@angular\/http';\n\nimport { AppComponent } from '.\/app.component';\nimport { newCustomPipe } from '.\/new-custom.pipe.ts';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    newCustomPipe\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/pre>\n\n\n\n
Template’ te de a\u015fa\u011f\u0131daki gibi newCustomPipe’ \u0131 kullan\u0131yoruz.<\/p>\n\n\n\n
<table class=\"row-border hover\" >\n  <thead>\n    <tr>\n      <th>#<\/th>\n      <th>Description<\/th>\n      <th>Time<\/th>\n      <th>Student<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr *ngFor=\"let item of sessions;let i = index\">\n      <td>{{ i + 1}}<\/td>\n      <td>{{item?.description | newCustomPipe}}<\/td>\n      <td>{{item?.time | date: 'dd\/MM\/yyyy HH:mm'}}<\/td>\n      <td>{{item?.first_name}} {{item?.last_name}}<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table><\/pre>\n\n\n\n
Parametreli Custom Pipe<\/h4>\n\n\n\n
E\u011fer template’ den parametrede g\u00f6ndermek istiyorsak \u015fu \u015fekilde yapar\u0131z.<\/p>\n\n\n\n
import { PipeTransform, Pipe } from \"@angular\/core\";\n\n@Pipe({ name: 'newCustomPipe' })\nexport class newCustomPipe implements PipeTransform {\n  constructor() {\n  }\n\n  transform(value:string, before: string, after: string) :string {\n    let newStr = `${before} ${value} ${after}`;\n    return newStr;\n  }\n}<\/pre>\n\n\n\n
<td>{{item?.description | newCustomPipe :\"Sat\u0131r Ba\u015f\u0131\":\"Sat\u0131r Sonu\"}}<\/td><\/pre>\n\n\n\n
Custom pipe yazmam\u0131z gerekli olan durumlarda nas\u0131l bunu olu\u015fturca\u011f\u0131m\u0131z\u0131 \u00f6\u011frendik. Ba\u015far\u0131lar …<\/p>\n","protected":false},"excerpt":{"rendered":"
Angular 2+’ da .html templatelerimizdeki karakter(string), say\u0131 veya tarih gibi verileri formatlama veya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in custom pipe yazabiliriz. Bu \u00f6rne\u011fimizde ” Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print,” metninin Lorem ks\u0131m\u0131n\u0131 at\u0131p geri kalan\u0131n\u0131 template ‘de g\u00f6stermek i\u00e7in custom pipe yazaca\u011f\u0131z. ilk \u00f6nce new-custom.pipe.ts ad\u0131yla bir ts […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22],"tags":[],"yoast_head":"\nAngular Custom Pipe Kullan\u0131m\u0131 - blog website custom pipe<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-custom-pipe-kullanimi-2\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Custom Pipe Kullan\u0131m\u0131 - blog website custom pipe\" \/>\n<meta property=\"og:description\" content=\"Angular 2+’ da .html templatelerimizdeki karakter(string), say\u0131 veya tarih gibi verileri formatlama veya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in custom pipe yazabiliriz. Bu \u00f6rne\u011fimizde ” Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print,” metninin Lorem ks\u0131m\u0131n\u0131 at\u0131p geri kalan\u0131n\u0131 template ‘de g\u00f6stermek i\u00e7in custom pipe yazaca\u011f\u0131z. ilk \u00f6nce new-custom.pipe.ts ad\u0131yla bir ts […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-custom-pipe-kullanimi-2\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-09T08:25:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-09T08:25:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-custom-pipe-kullanimi-2\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-custom-pipe-kullanimi-2\/\",\"name\":\"Angular Custom Pipe Kullan\\u0131m\\u0131 - blog website custom pipe\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"datePublished\":\"2020-11-09T08:25:39+00:00\",\"dateModified\":\"2020-11-09T08:25:42+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-custom-pipe-kullanimi-2\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-custom-pipe-kullanimi-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/angular-custom-pipe-kullanimi-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Custom Pipe Kullan\\u0131m\\u0131\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/253"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=253"}],"version-history":[{"count":1,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/253\/revisions"}],"predecessor-version":[{"id":254,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/253\/revisions\/254"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}