Angular

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>

     

The Code Hubs

Share
Published by
The Code Hubs

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago

123435

546546

2 years ago