All language subtitles for 11. Creating Custom Pipes

In this video we're going to figure out how to generate our own custom pipe.

The goal of our custom pipe is to take in some distance in miles and then convert it into kilometers.

We're going to first get started by building it another little input output pair.

We're going to add another property to our component class.

And then after that it will generate a new pipe.

Let's get to it first get started by opening up my app component once again inside of here.

I'm going to declare a new property of Miles.

Well then add on an event handler for this as well.

So on.

Miles change I'll say value is going to be a string was signed that two miles.

And once again going to do a pass float on it Next up will open up our component template.

It is right here.

And just as we've done several times I got to find one of these div of class roadblocks right here to

highlight the thing and I'll duplicate it right underneath itself.

So and then going to zoom back in and we'll change a couple of properties on here.

First off I'll change the label two miles will change the callback right here too on Miles change I'll

change the output label down here two kilometers and then right now I'll just print out Miles like so

okay.

So let's say this look back over see how we're doing.

Well I can see the input right there and if I start to type in some number Yep I see it over here.

Very good.

Now it's time for us to generate a pipe we generate pipes in the same way that we generate components.

So in other words we make use of the angular CLIA.

Let's change on over to our command line and run the command.

That will generate a new pipe for us inside of my project director right here.

It's on my project directory.

I will run energy generate hype and in the name of our pipe I'm going gonna color pipe simply convert.

We are converting from miles to kilometers.

There might be a better name for this than convert since we are doing a very specific conversion.

But this will work for right now I'll run that command and we'll see that two files are generated and

one file is updated the file that we really care about here is the convert that pipe dot t s file.

Let's go open up that file and see what we got back inside my Ed. I'll find the app directory and inside

of there is the convert dot up dot T.S. file.

This is a pipe right here the whole pipe is to be honest the kind of similar or simple in nature.

It really just has one important function side of it called transform.

Meantime we make use of a pipe.

This transform function is going to be invoked.

We're going to receive some input value as the first arguments.

And it's our job to do some calculation inside of here and then return some new value.

Let's take a look at how we use this in a very basic and simple form going to first go back over to

my component template a find where we are currently printing out Miles and I'll pipe it through the

convert pipe that we just generated you'll notice that as soon as I add that on I get a little air here

and if I mouse over that it says might convert could not be found.

If you see this area as well this is really just an air coming from your editor.

You can fix it by going up to view binding command pallet and in search for reload window if you do

that that's going to essentially re initialize TypeScript and your editor the typescript checker.

And now that air will go away I can now mouse over convert and it correctly says that this is a pipe.

The interesting thing about making use of these pipes that we generate is that we don't really have

to add in any kind of import statement or anything like that.

We just go ahead and make use the pipe and we're good to go okay.

Now that we are hyping that value into our convert pipe inside my transformer method right here.

Gonna do a console log of the value that flows in I'll then save this.

I'm gonna flip back over and let's see what our console log is right away.

I'll see it I get a console log of undefined as because inside of our app component the miles property

starts off is undefined.

We never actually set a value to it.

We only declared that property inside of app component.

Yes.

Right here we have Miles when this complaint is first created.

There is no value for the Miles property yet it's not until we actually type inside of our input that

this property is going to be updated as soon as we start to type inside that input.

Now a value is being set and we can see one two three or one than one two and one two three appear we

no longer see an output right here on the screen because our transform function is not actually returning

anything.

Let's try changing that right now.

Back inside my pipe I'm going to take whatever value we get and I'm going to add 20 to it we'll save

this look back over and you'll notice.

Now we start off with not a number that's because we took the value undefined and tried to add a number

to it.

Result of that operation is not a number.

We'll probably want to figure out some way to handle that case is obviously we probably don't want to

show not a number at any point time to a user by now entering one.

I see that I get the results of one plus 20 okay.

That's the basics of pipe really just taken a value.

We modify the value and return it.

Well let's now try to handle the case in which we receive a value that is undefined.

So that's when we were just showing not a number.

We definitely want to show not a number.

We also take care of the case in which value is defined and we actually have a number and we want to

convert it over to kilometers.

But I handled a case in which value is not defined.

We can add in a very simple if statement and say if there is no value that is passed in and just return

empty string.

Now if I flip back over I don't see anything until I start to type in an actual value.

Well that was simple enough.

Now we can add in some math to do a conversion from our value in miles over two kilometers.

Really quickly let's look up that conversion constant inside of Google.

New tab right here I'm going to do a quick search and I'll say Miles you can to get from one mile over

two kilometers we multiply by one point six O nine.

We're going to take that value I'll take my value right here I'm going to multiply it by that value

OK so I'll save this flip back over and now if I enter in one mile I get the equivalent distance in

kilometers or one hundred one thousand two hundred whatever else.

Well that's the basics of creating our own pipes but as you can see they're pretty easy to generate

very easy to write.

Very easy to make use of.

We're going to use pipes every now and then inside of our application.

Any time we feel like we need to do some kind of like custom transformation now we've seen this quick

pause right here move on in the next video.