A Brief Introduction of Pipe in Angular
Posted By : Damandeep Singh | 31-May-2018
In Angularjs and Pipes
Syntax :
{{ Welcome to Angular 4 | lowercase}}
It takes integers, strings, arrays
Angular 4 provides some
- Lowercasepipe
- Uppercasepipe
Datepipe Currencypipe - Jsonpipe
- Percentpipe
- Decimalpipe
Slicepipe
Angular also
- To create a custom pipe, create a new TS file
- import pipe and pipe transform from @angular/core.
- give the name to our pipe under @pipe directive which will be used in our .html file
- implement PipeTransform with class
- Define transform method which will return your expected result
- Import it in
app.module.ts file and declare in declarations
example :
import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
transform(val : number) : number {
return Math.sqrt(val);
}
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Damandeep Singh
Damandeep Singh is a Front-end Developer having Good knowledge of HTML, CSS3/CSS, Bootstrap, Angular, Ionic. He likes to listen to Music in Free time.