Pipes - Angular (Tutorial #15)

In this video we will learn about Pipes in Angular applications

Angular JS 1.x has filters which are used for many common uses like formatting dates, string display in uppercase or lowercase etc. These filters are knows as "Pipes" in Angular
Pipes allows us to change the data before display to the user.
Normally a pipe takes the data and transforms this input to the desired output. There are two types of pipes in Angular
1) built-in pipes
2) Custom pipes

Built in pipes are already created in angular ,we just need to call that if we want to use it. If Built-in pipes are not sufficient for project needs we are free to create custom pipes

There are 10 built in pipes in angular
1) Uppercase
2)Lowercase
3)Titlecase
4)date
5)Currency
6)Number
7)date
8)slice
9)json
10)async

Syntax :
{{ expression | pipename:arguments }}

Whenever you want to use pipe just use pipe name followed by pipe(|) character. Pipes are methods behind the scene , so methods can take arguments in same manner pipe can also take argument which you will pass after colonn(:)

Chaining of Pipe: Sometime we want to use more than one pipe on same expression so this is called chaining of pipe. So here suppose we want to apply date and uppercase together on dob express
{{dob | date | uppercase}}

In this case output of date pipe will act like a input for uppercase pipe

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 @

[hafismuhammad]

Even you are taking a class about pipes in this particular tutorial, but i am learning more concepts because of your teaching style. Thank you nisha singla, i have great respect for you.

[kotireddy]

When to used pure pipe and impure pipe ? Can you please explain regarding this

[mohammadmaroof]

Very nice tutorial, explained in very simple way.

[mannumahto]

Your explained every point very nicely...love your content on angular 4

[pkumar]

Please explain on the pure and impure pipe as well

[nirajbadaik]

Thanks for the tutorial. please make some tutorials on form validation

[prudhvikumar]

maam what is full name of <pre> tag??

[SenthilMuthiah]

Good Work. Where can I see the code shown in this tutorial

[dikshantyadav]

is there any way to search a particular record from the table depending upon the user input??(like you have filter: filter in angular js something like that??)