Angular custom pipe | Angular 8 Custom Pipes | Angular Pipe | Angular 8 ...

Angular custom pipe | Angular 8 Custom Pipes | Angular Pipe | Angular 8 tutorial custom pipes


Hello and welcome back to our series on angular tutorial for beginers.  In my previous video we have already discussed what are pipes, why there is even a requirement for a pipe and

What pipes angular provides by default.. I strongly recommend to watch that video if you haven't





~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
PART 1: https://www.youtube.com/watch?v=J8NV-5enrjM
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ANGULAR PLAYLIST :

https://www.youtube.com/playlist?list=PLNZhx8Es_AvKNZQVAmgV1oAjnthDPGRlT

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



This is the Part-2 of our last video in the series.



Lets begine, Sometimes built in pipes are not sufficuent for data formatting..



In this video we will learn to create custom pipes in Angular.



In the last video, I created this table for students data out of an array of json objects. It has the details of

student like-



ID, NAME, CLASS, DOB and FEES..



We tried several built in pipes like uppercase, lowercase, date, slice, decimal etc. on the data present in this table.



Now consider a case, you need prefix Solutation before the name of the student. By solutation I mean- Mr. or miss.

So the use case is, if the gender is 1 which means Boy, prefix Mr. to student name.

If the gender is 0 which means girl, prefix Miss to student name



I hope the problem statement is clear. Angular does't provides any predefined pipe for our requirement. and therefore,

We will have to create our own custom pipe for this requirement..



We have two options now-



1) Generate the pipe using angular cli- the command is very simple (ng g pipe {pipeName}) OR

2) Create the pipe manually



Lets first go with the second approach that is creating manually, so that I can give more details about the pipes-



Create a file name it prefixSolutation.pipe.ts [File name is according to angular conventions]



Angular pipe is actually a simple class which is decorated by @Pipe decorator.



import {Pipe} from '@angular/core';



@Pipe({

   name: 'prefixSolutation'

})

class PrefixSolutationPipe {



}



The logic for the pipe is contained inside a method called transform  like as folllows-



@Pipe({

   name: 'prefixSolutation'

})

class PrefixSolutationPipe {

   transform(value: string, gender: boolean): string {

 return value;

   }

}





and to use transform pipe you will have to first import transformPipe from @angular/core like as--



import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

   name: 'prefixSolutation'

})

class PrefixSolutationPipe impplements PipeTransform {

   transform(value: string, gender: boolean): string {

 return value;

   }

}



Here the value is the field mentioned before the pipe symbol '|' in code, on which we are applying the pipe.



Now, this is a working pipe, lets use it in the html file now



{{student.name | prefixSolutation: student.gender}}



Open the browser to see the result-



It has displayed everything as it is...



Till now our pipe is not doing anything, we haven't written the logic for this-



Open the editor and write the logic in pipe to transform the name-



Go inside the transform method, check if gender is 1 add MR. otherwise Miss. like as follows:-



import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

   name: 'prefixSolutation'

})

class PrefixSolutationPipe impplements PipeTransform {

   transform(value: string, gender: boolean): string {

 return gender === 1? `Mr. ${value}`: `Miss ${value}`;

   }

}



Go back to the browser and see the result. Now it has tranformed the names. this is what we are expecting..



Generating a pipe through angular cli is Home work for you guys, try it and ask for problems in the comment box.



Let me summarize everything-



Creating a pipe is very simple in Angular. We just decorate a class with the @Pipe decorator, provide a

name and a transform function and we are done.



That is all about creating custom pipes. now, try to do the same in you code. stay tuned for the next videos...



Please like my social media page:

https://www.facebook.com/saigraceschool

https://twitter.com/saigraceschool

https://www.instagram.com/saigraceschool

https://www.youtube.com/c/renurawat?sub_confirmation=1



To Get Regular Content Updates-

https://www.youtube.com/c/renurawat?sub_confirmation=1



--

#RenuRawat #CustomPipesInAngular #Angular #Pipes