Post
Ask Question

Custom Pipe With Angular Using Node.js And VS Code

Custom Pipes

 
Custom Pipes are pipes that are created by the user. That means if the user wants to use any other pipes which are not available in the Angular library, then the user has the right to create their own pipes. These pipes are called Custom Pipes.
 
That means the user creates their own pipes according to their requirements, and transforms data into another form.
 
To create a custom pipe you have to apply the @pipe decorator to class, which we can upload from the core Angular library.
 
The @pipe decorator allows you to define the pipe name that you will use within template expression.
 
The syntax is:
  1. Import {pipe, pipe transform} from ‘@angular/core’ ;  
  2. @pipe({name:expression})  
  3. Export class pipeclass implements pipetransform{  
  4.    Transform(perameters):returntype{}  
  5. }  
Transform() method will decide the input types, the number of arguments, and its types and output type are our custom pipes.
 

How to create a custom pipe

 
First, you have to create an application using the command “Ng new my-app.” After this, you have to create a component using the command “ ng g component pipe component ”. When you run this command the server creates a component in your application. After creating the component you have to go to the module and register those files in the module in the declaration section. Then you have to go to the component page and declare a variable and declare all values in this variable and set all values in the declaration time. Then you have to go to the pipe component and import the pipe,  implement pipe transform and then transform all values according to the user, and then put the conditions you want. After completing these 2 steps you have to go to the Html component and print all values in the Html component in the form of a table using an ng for loop. Ng for loop is used to print all values which are declared in the custompipecomponent.ts page.
 
custompipe.html
  1. <h2>welcome to custom pipe example </h2> <br>  
  2. <table border="1">  
  3.     <tr *ngFor="let student of student">  
  4.   
  5.         <td>{{student.code}}</td>  
  6.         <td>{{student.name |mypipe:student.gender}}</td>  
  7.         <td>{{student.gender}}</td>  
  8.   
  9.         <td>{{student.rollnumber}}</td>  
  10.   
  11.     </tr>  
  12.   
  13. </table>  
custompipe.ts
  1. import { Component } from '@angular/core';  
  2. import { sendRequest } from 'selenium-webdriver/http';  
  3. @Component({  
  4.     selector:'app-custompipe',  
  5.     templateUrl:'./custompipe.html'  
  6. })  
  7. export class custompipecomponent{  
  8.     student:any=[{  
  9.         code:'1001', name:'Chaman', gender:'male', rollnumber:'123456'  
  10.     },  
  11.     {  
  12.         code:'1002', name:'Shivani', gender:'female', rollnumber:'123456'  
  13.     },  
  14.     {  
  15.         code:'1003', name:'Lucky', gender:'male', rollnumber:'123456'  
  16.     },  
  17.     {  
  18.         code:'1004', name:'Lavanya', gender:'female', rollnumber:'123456'  
  19.     }  
  20. ]  
  21.   
  22. }  
pipecomponent.ts
  1. import { Pipe, PipeTransform } from '@angular/core';  
  2. import { getLocaleWeekEndRange } from '@angular/common';  
  3.   
  4. @Pipe({  
  5.   name: 'mypipe'  
  6. })  
  7. export class MypipePipe implements PipeTransform {  
  8.   
  9.   transform(value: string, gender: string): string {  
  10.     if(gender.toLowerCase()=="male")  
  11.   
  12.     return "mr." + value;  
  13.     else  
  14.     return "miss." +value;  
  15.   }  
  16.     
  17.   
  18. }  
appmodule.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppComponent } from './app.component';  
  5. import { astservice } from './artservice';  
  6.   
  7. import { pipecomponent } from './pipe and directory/pipecomponent';  
  8. import { custompipecomponent } from './custompipe/custompipe';  
  9. import { MypipePipe } from '../app/custompipe/mypipe.pipe';  
  10.   
  11. @NgModule({  
  12.   declarations: [  
  13.     AppComponent,  
  14.     pipecomponent,  
  15.     custompipecomponent,  
  16.      MypipePipe,  
  17.      DirectiveComponent  
  18.   ],  
  19.   imports: [  
  20.     BrowserModule  ],  
  21.   providers: [astservice],  
  22.   bootstrap: [customPipecomponent]  
  23. })  
  24. export class AppModule { }  
index.ts
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.   <meta charset="utf-8">    
  5.   <title>Augs</title>    
  6.   <base href="/">    
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">    
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">    
  9. </head>    
  10. <body>    
  11. <app-pipe></app-pipe>    
  12. </body>    
  13. </html>    
Main.ts
  1. import { enableProdMode } from '@angular/core';  
  2. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
  3.   
  4. import { AppModule } from './app/app.module';  
  5. import { environment } from './environments/environment';  
  6.   
  7. if (environment.production) {  
  8.   enableProdMode();  
  9. }  
  10.   
  11. platformBrowserDynamic().bootstrapModule(AppModule)  
  12.   .catch(err => console.error(err));  
Now open the terminal and compile the project using command ng serve. Then go to the web browser and hit the command localhost:4200
After a few seconds, your output will be displayed on your computer screen.
 
OUTPUT 
 
Custom Pipe With Angular Using Node.js And VS Code
 
I hope you enjoy this article to learn more about the angular follow me and learn about more technologies follow c#corner.


Similar Articles