{"id":114,"date":"2019-10-14T15:47:26","date_gmt":"2019-10-14T12:47:26","guid":{"rendered":"http:\/\/www.etemkeskin.com\/?p=114"},"modified":"2020-11-11T12:56:05","modified_gmt":"2020-11-11T09:56:05","slug":"angular-custom-pipe-usage","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2019\/10\/14\/angular-custom-pipe-usage\/","title":{"rendered":"Angular Custom Pipe Usage"},"content":{"rendered":"\n

In Angular 2+, we can use custom pipe<\/strong>s to format or convert data such as character (string), number or date in our .html templates.<\/p>\n\n\n\n

In this example, we will write a custom pipe to remove the Lorem part of the text “Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print<\/em>,” and show the rest in the template.<\/p>\n\n\n\n

First we create a ts file named new-custom.pipe.ts<\/strong>.<\/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 string type\n    this.data=value.substring(5);\n    return this.data;\n  }\n}\n\/\/ The simplest Custom Pipe example. We need to add it to declarations in Angular Module.<\/pre>\n\n\n\n
Then we define the custom pipe in app.module.ts<\/strong><\/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
We use newCustomPipe<\/strong> in the template as follows;<\/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
Custom Pipe with Argument<\/h4>\n\n\n\n
If we want to send argument from the template, we do it as follows;<\/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 :\"Begining of line\":\"End of line\"}}<\/td><\/pre>\n\n\n\n
We learned how to create it in cases where we need to write custom pipes. <\/p>\n\n\n\n
Success …<\/p>\n","protected":false},"excerpt":{"rendered":"
In Angular 2+, we can use custom pipes to format or convert data such as character (string), number or date in our .html templates. In this example, we will write a custom pipe to remove the Lorem part of the text “Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"yoast_head":"\nAngular Custom Pipe Usage - blog website custom pipe<\/title>\n<meta name=\"description\" content=\"In Angular 2+, we can use custom pipes to format or convert data such as character (string), number or date in our .html templates\" \/>\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\/2019\/10\/14\/angular-custom-pipe-usage\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Custom Pipe Usage - blog website custom pipe\" \/>\n<meta property=\"og:description\" content=\"In Angular 2+, we can use custom pipes to format or convert data such as character (string), number or date in our .html templates\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2019\/10\/14\/angular-custom-pipe-usage\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-14T12:47:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-11T09:56:05+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\/2019\/10\/14\/angular-custom-pipe-usage\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2019\/10\/14\/angular-custom-pipe-usage\/\",\"name\":\"Angular Custom Pipe Usage - blog website custom pipe\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"datePublished\":\"2019-10-14T12:47:26+00:00\",\"dateModified\":\"2020-11-11T09:56:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"In Angular 2+, we can use custom pipes to format or convert data such as character (string), number or date in our .html templates\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2019\/10\/14\/angular-custom-pipe-usage\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2019\/10\/14\/angular-custom-pipe-usage\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2019\/10\/14\/angular-custom-pipe-usage\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Custom Pipe Usage\"}]},{\"@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\/114"}],"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=114"}],"version-history":[{"count":27,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions\/363"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}