All language subtitles for 7. Displaying Currency

All right.

In this video we're going to take a look at this last pipe down here.

Let's first add a property onto our class just as we did a moment ago in an event handler to handle

this amount.

Input back inside my Ed..

I'll find my app component class.

I'm going to add in an amount that's going to be a number as opposed to a string for the other two.

I'll then put together a event handler for this.

So on amount change

I'll receive some value that's going to be a string.

It's gonna be a string because anytime we get an input event on input elements are always going to pull

that value out as a string even if it looks like we entered a number to you and I we're going to update

the value of this dot amount.

We'll make sure that we attempt to pass a float out of there like so that looks good.

Let's now go and update our template.

Back inside my template once again I'm going to zoom out for a second here and I'm going to find this

entire big section that says Glass row one side of class row I should have a date with class or group

in a class with column.

I'll then copy that section and then pasted down below

and then once again I'm going to update a couple of labels and whatnot over the first label.

I'll change that to payment amount.

I'm going to remove the type of date of that input I'll update the event handler name to on amount change

on the day with class column I'll update the label to payment mount I'll update the property name that

we are referencing to amount.

And then finally I'm going to delete that existing pipe OKAY.

SO I'LL SAVE THIS I'LL PUT BACK OVER THERE WE GO.

Now I can enter and say 10 and see that printout on the screen.

But again we want to print out something that is really nicely formatted but if I enter in something

like 10 or 20 I want to see some kind of currency sign and also some decimals on there list to make

sure it's really clear to the user the exact amount that they are going to be paying via our form.

Well once again we need to make use of a built in angular height.

Let's take another look at this pipe list.

And on here you'll see.

Sure enough fancy pipe.

Let's take a look at that to make use of the currency pipe once again.

Same exact syntax we're gonna write out our value then the pipe symbol and then just the word currency

by itself very similar to the date pipe.

We can provide a variety of different arguments to customize how this thing actually gets printed out

but let's just try to print out the currency pipe for right now by itself and see what we get by default

back inside my template right after amount done here at the bottom.

I'll put in the pipe and write out currency and I'll save that look back over and I'll put in my payment

amount and by default I get U.S. dollars I get US dollars formatted in a very particular fashion.

Well so it looks good.

Now once again if you see something different if you see something for your particular currency based

on your location it's coming from your browser settings.

Regardless it's really important for us to understand how to change the currency or on here.

Let's take a quick pause right here and then more closely examine some of the different currency or

arguments we can provide to the currency pipe.