Custom Pipe - Angular (Tutorial #16)
In this video we will learn about Custom Pipe in Angular.
Pipes are one of the interesting feature of angular but sometimes built-in pipes are not sufficient for our formatting data , there we create Custom pipes
Use this link to share this video: • Custom Pipe - Angular (Tutorial #16)
To create custom pipe we need to create a .ts file and that file will be a pipe with the help of @Pipe decorator. Use ng generate command to create Custom pipe
ng g p pipes/age
here it will create one pipes folder inside app folder and inside pipes folder it will create age.pipes.ts
All Custom pipe must implements PipeTransform interface and we need to define transform() method. Transform method will define the logic for custom pipe. Transform() method takes atleast one parameter that is used to hold the data on which we are using pipe. and if your pipe is parameterised then we need store that value after the first arguements
transform(value: any): any {
let currentYear:any = new Date().getFullYear(); // 2018
let userBirthYear:any = new Date(value).getFullYear();
let userAge = currentYear-userBirthYear;
return userAge;
}
We are taking date of birth from template and from this date we are extracting only year to get the age of the user.
If you liked my channel , subscribe to it and like my videos. For any queries ask you question in comment section
you can also connect with me @
Facebook: / angularjs4beginners
LinkedIn: / nisha-singla-82407aa0
Website :
