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
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
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!
ReplyDeleteAngular JS Online training
Angular JS training in Hyderabad
Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
ReplyDeleteangular js online training
best angular js online training
top angular js online training