Create and Used PIPE in angular

Steps for Create and Used PIPE in angular

  1. Create ts file name like string-date-format-pipe.ts 
    import { Pipe, PipeTransform } from '@angular/core';
    
    @Pipe({ name: 'replaceAll' })
    export class StringDateFormatPipe implements PipeTransform {
      transform(value: string, find: string, replace: string): string {
        return value.replace(new RegExp(find.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), replace);
      }
    }
    

     here in the example code we can create pipe call replace all functions that can replace your string with the specified value 

  2. How to use pipe in our angular commponent 
     => In your app.module.ts file write the below code 
     
    import { StringDateFormatPipe } from './pipe/string-date-format-pipe';
    
    @NgModule({
      declarations: [
        StringDateFormatPipe
      ]
    })
    export class AppModule { }

    => In your  component HTML file write the below code

    <span>pipe example {{name}} replace _ With Space:{{name|replaceAll:"_":' '}}</span>

     

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories