All language subtitles for 13. Two Neat Things with Pipes

In this video I want to take a look at one or two little gotchas around pipes.

Just some things that you need to be aware of.

The first thing you need to be aware of is that although we've been using pipes quite a bit with this

interpolation syntax you can technically use pipes almost anywhere inside of a template.

Let me give you a quick example.

Let's add in a new requirement to our project and let's say that if we have some enter entry for miles

that is less than 10 maybe we don't want to do a conversion at all.

Let's say that if we enter something less than 10 miles I don't want to display this.

But any time that you want to toggle the visibility of some element we can use that energy if structural

directive.

We could say energy if and then inside of here we could do our comparison very easily.

So we could say miles less than an excuse me greater than 10.

I said let's see it only if it's greater than 10.

It's let's save this.

Now we can flip back over and if I enter in miles of say for nothing shows up but as soon as I put in

eleven.

Now I get that display.

OK.

Well simple enough but how does that relate to pipes.

Let's now convert change this just a little bit.

Let's say that rather than displaying this output if Miles is greater than 10 maybe we only want to

display this output.

If we have some entry that is greater than 10 kilometers it would require us to somehow take the miles

convert it into kilometers and then do the conversion rather than writing in some logic like directly

here to say hey let's take Miles and multiply it by one point.

So 9 4 or whatever it was we could instead just reuse the pipe that we already put together.

But to do so you're going to be tempted to shoot first the wrong way to do this.

You're going to be tempted to write up something like this convert two kilometers.

That's not quite right.

Instead whenever we use a pipe inside of some template syntax like we have right here we have to wrap

it up in a set of parentheses.

I can wrap that the parentheses and now the air seems to go away.

Now we would read this as saying take a look at Miles inverted into kilometers and then make sure that

that is greater than 10.

If that is not greater than 10 then hide the entire div it's going to say this now look back over now

if I put in just one mile I do not see anything but if I put in say like eight eight converts into a

number of kilometers greater than 10 which means we're going to show that div in everything inside of

it.

Right now I see an output right here of like this one point two eight million or twelve million whatever

it is.

And that's because I still have a conversion down here of centimeters.

If I change that to Cam example of make just a little bit more sense.

Now if I put in say seven.

There we go.

It's clearly greater than ten because I've got eleven point two kilometers.

Again the only thing you need to understand here is that we can use pipes in other locations than just

inside of our interpolation syntax.

You can use them inside of directives.

We can use them inside of binding like property binding or event binding just about everywhere.

And one thing you need to remember is that as soon as you start to use some other kind of expression

like say a greater than sine or an assignment or anything like that just remember chances are you might

need to wrap it with a set of parentheses OK.

One other small thing that I want to discuss we're just going doing this video because it is a very

very quick thing going to remove that energy if directive is going to change our conversion back over

two centimeters if I save this pull back over and if I just enter like one mile right here.

How about even like point 0 0 1 miles.

You'll notice that as soon as I do I get a floating point math error right there.

Obviously this is not quite right.

It's just because of how javascript treats math in general.

Let's imagine that a user enters point 0 0 1 and they see an output like that and they'd probably say

what that doesn't look right there's something wrong with this application.

A very easy way that we could fix this up would be to use that decimal pipe that we took a look at just

a little bit ago.

Remember we used the decimal pipe right up here and we used it by writing out the word number running

out number refers to the decimal pipe so it would be great if we could do our conversion into centimeters

and then take the output of that and then throw it into the decimal pipe.

Make sure that we limit the number of decimal places that we show Inside the output.

But to do so we essentially want to take Miles.

Throw it into converts and then throw it into number.

But all we have to do is write out another type symbol like so now we could put in another pipe over

the number pipe right here we would probably want to customize it and say give us at least one digit

to the left of the decimal.

And then at most or at least zero excuse me at least zero to the right and at most maybe you like to.

Now if I save that and I put in point 0 0 1 miles again now I see it kind of chopped off.

And if I put in say 1 yep looks great So again we can use multiple different pipes together by just

changing them with this kind of syntax like you see right here.

All right.

So that's two little interesting tidbits around pipes and that's pretty much all we're going to discuss

around pipes right now.

Let's take a pause right here and continue in just a moment.