{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/create-custom-pipe-angular/", "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"420f4ce5-7f37-5153-8b49-85d5231fdcc8","excerpt":"In this article i will explain you how you can create custom pipe in angular application, i will create a custom pipe text shortener. Step 1: Create a file for…","html":"

In this article i will explain you how you can create custom pipe in angular application, i will create a custom pipe text shortener.

\n

Step 1: Create a file for your custom pipe and add it to your module

\n\n
//src/pipe/shorten.pipe.ts\nimport { Pipe, PipeTransform } from \"@angular/core\";\n\n@Pipe({\n  name: \"shorten\",\n})\nexport class ShortenPipe implements PipeTransform {\n  transform(value: any, limit: number) {\n    if (value.length > limit) {\n      return value.substr(0, limit) + \" ...\";\n    }\n    return value;\n  }\n}\n
\n\n
import { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\n\nimport { AppComponent } from \"./app.component\";\nimport { ShortenPipe } from \"./shorten.pipe\";\nimport { FilterPipe } from \"./filter.pipe\";\n\n@NgModule({\n  declarations: [AppComponent, ShortenPipe, FilterPipe],\n  imports: [BrowserModule, FormsModule],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n
\n

Step 2: Using the pipe

\n

Once you have followed all the steps above you can use this custom pipe for example

\n
<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2\">\n      <input type=\"text\" [(ngModel)]=\"filteredStatus\" />\n      <br />\n      <button class=\"btn btn-primary\" (click)=\"onAddServer()\">\n        Add Server\n      </button>\n      <br /><br />\n      <h2>App Status: {{ appStatus | async}}</h2>\n      <hr />\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item\"\n          *ngFor=\"let server of servers | filter:filteredStatus:'status'\"\n          [ngClass]=\"getStatusClasses(server)\"\n        >\n          <span class=\"badge\"> {{ server.status }} </span>\n          <!-- Custom pipe used here with name shorten and parameter passed is 15  -->\n          <strong>{{ server.name | shorten:15 }}</strong> | {{\n          server.instanceType | uppercase }} | {{ server.started |\n          date:'fullDate' | uppercase }}\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n
","fields":{"slug":"/create-custom-pipe-angular/"},"frontmatter":{"title":"How to create custom pipe in angular","date":"May 10, 2022","description":"In this article i will explain you how you can create custom pipe in angular","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/custom-pipe-in-angular.jpeg"}},"previous":{"fields":{"slug":"/create-custom-directive-angular/"},"frontmatter":{"title":"How to create custom directive in angular","date":"April 30, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/creating-custom-directive-angular.jpeg"}},"next":{"fields":{"slug":"/create-gatsby-markdown-blog-website/"},"frontmatter":{"title":"Create Gatsby responsive blog website with markdown files","date":"May 25, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby.jpg"}}},"pageContext":{"id":"420f4ce5-7f37-5153-8b49-85d5231fdcc8","previousPostId":"1391ca31-71e9-50de-8880-84c95b074ac2","nextPostId":"a723ff61-472b-5e27-8834-ad0318aeb460"}}, "staticQueryHashes": ["3860684146"]}