All language subtitles for 9. Formatting Numbers

Well our application is pretty much complete but I still want to show you a couple more pipes.

We're gonna add in a couple more inputs to our form right there.

We're going to take a look at just one or two other pipes.

Next one we're going to take a look at.

I mentioned at the end the last video it is the decimal pipe we can use the decimal pipe to format a

number that gets printed out on the screen.

Let's first add in a new property to our class and add in some input to our form to actually play around

with this pipe.

It's a back inside of my apt component.

I'm going to add in a new property called height and I'll make it a number.

This is going to represent the height of a person in centimeters.

I'll add on an event handler for this.

So on height change I'll take in some value that we're gonna receive as a string and I'll update the

height property.

I'll make sure that I wrap the value with a pass What right now looks good I'll go back over to my app

template that is right here and once again I'm going to duplicate one of these divs with class row.

I'm gonna find that really big section right there.

I'm going to copy it.

Throw it right down underneath itself.

I'll zoom back in and we'll update some the different labels and whatnot on here.

First off I'll find a label and change it to heights I'll change the method name too on height change

I'll change the second label to height as well and then finally I this interpolation we're gonna print

out the height property.

All right I'm going to save this and then flip back on my browser and see how we're doing.

We've got our input right here and I can enter in some kind of number with a decimal.

It turns out that very often we want to say trim off a decimal from the very end of a number.

We really only want to do that when we print the number out on the screen.

Good example for this is well showing your height as centimeters.

Now to be honest with you I live in the U.S. So I use the imperial system as opposed to metric but in

my experience it turns out what I've seen is that a lot of people when they express their height in

centimetres they don't often throw on a decimal for trying to shore height as centimeters right here.

Maybe we want to trim off the decimal from the very end and that is where the decimal cut pipe comes

into play we can use the decimal pipe to very easily customize how a number is printed out on the screen

when it has a decimal on it.

Make use this.

We're going to write out our expression to actually print out that variable in the pipe symbol and the

word number.

After that we can then provide some argument which is called right here digits info.

Is going to customize exactly how the number gets printed.

Let's take a look at this pipe.

I can sort of my template I'll add in the symbol and number I'll provide an argument that has a string

inside the string.

We're gonna provide a formatting statement but this formatting statement has a kind of interesting formatting

to it.

When we first show you how it works I'm gonna write out one point zero dash zero the way we read this

is it says to the left hand side of the decimal printout at most one digit and to the right hand side

the decimal print out at least zero digits and up to zero digits.

Let's take a look at what this actually does inside the browser and I think you'll get an idea of how

to work with that rather quickly.

I'm gonna save that look back over now if I enter in some value in a decimal whenever I enter as a decimal

just falls off and it doesn't actually get printed out.

And the reason for that is I said print out at most or at least zero digits to the right hand side of

the decimal.

And at most zero which effectively means print out no digits to the right.

If I change this to something like 1 dash 3 we would read this as saying print out at least 1 to the

right and at most 3 to the right if I save that and run it again I can now write out say 100 hundred

and I'll see what I get at least one digit to the right was 0 is added on arbitrarily even if my original

number do not have it if I then start to add on some decimal here it's going to print out up to three

digits but as soon as I enter more than 3 0 they don't get printed and to be aware that angular does

use some rounding here.

If I change this to 0 1 2 and then a 9 angular will round that up to a 0 1 3 and there's something kind

of interesting about this formatting right here.

If you start to put in like give me nine digits till after the period then the way angular treats that

as well I'm going to give you nine digits to the left of the period.

Even if you just enter one number like so be a little bit careful with that number right there back

injury that time you're going to want to use just one unless you have a very very special use case OK.

So that's pretty much it for the decimal type.

We use that thing very frequently.

Any time that we want to print out and format some kind of number yes let's take a quick pause right

here and continue in just a minute.