Create Custom PIPE in Angular 9.0

2
Create Custom PIPE in Angular:-

Using this we can create our own PIPE which can be used in multiple views to change the properties of View Data at runtime.

Create .ts file under app and add it on app.module.ts file

Step to create Custom PIPE:-

1)  Right Click on app folder and create mypipe.ts file then create TypeScript class


import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'scssqr'
})
export class SquarePipe implements PipeTransform {
   transform(val : number) : number {
      return val*val;
   }
}

2)  Open app.module.ts file and Write Following Code:-

    import { SquarePipe } from './mypipe';

     Write   SquarePipe   under-declarations section

3)  Call Pipe on any HTML file under expression:-

      {{ 21|scssqr }}

...............................................................................................................................

We can create pipe using CLI

Open the command prompt and write following command:-

ng g p name

Post a Comment

2Comments

POST Answer of Questions and ASK to Doubt

  1. Excellent Blog! I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. I wanted to thank you for this websites! Thanks for sharing. Great websites!
    Angular JS Online training
    Angular JS training in Hyderabad

    ReplyDelete
  2. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angular js online training
    best angular js online training
    top angular js online training

    ReplyDelete
Post a Comment