Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,900 --> 00:00:05,020
Well our application is pretty much complete but I still want to show you a couple more pipes.
2
00:00:05,160 --> 00:00:07,800
We're gonna add in a couple more inputs to our form right there.
3
00:00:07,800 --> 00:00:10,930
We're going to take a look at just one or two other pipes.
4
00:00:10,980 --> 00:00:12,050
Next one we're going to take a look at.
5
00:00:12,060 --> 00:00:16,890
I mentioned at the end the last video it is the decimal pipe we can use the decimal pipe to format a
6
00:00:16,890 --> 00:00:19,320
number that gets printed out on the screen.
7
00:00:19,320 --> 00:00:25,140
Let's first add in a new property to our class and add in some input to our form to actually play around
8
00:00:25,140 --> 00:00:26,860
with this pipe.
9
00:00:26,880 --> 00:00:28,680
It's a back inside of my apt component.
10
00:00:28,760 --> 00:00:32,940
I'm going to add in a new property called height and I'll make it a number.
11
00:00:33,000 --> 00:00:36,780
This is going to represent the height of a person in centimeters.
12
00:00:37,060 --> 00:00:38,860
I'll add on an event handler for this.
13
00:00:38,890 --> 00:00:46,600
So on height change I'll take in some value that we're gonna receive as a string and I'll update the
14
00:00:46,600 --> 00:00:47,860
height property.
15
00:00:47,920 --> 00:00:56,130
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
16
00:00:56,190 --> 00:01:02,520
template that is right here and once again I'm going to duplicate one of these divs with class row.
17
00:01:02,730 --> 00:01:05,210
I'm gonna find that really big section right there.
18
00:01:05,210 --> 00:01:06,710
I'm going to copy it.
19
00:01:07,080 --> 00:01:09,260
Throw it right down underneath itself.
20
00:01:09,450 --> 00:01:13,080
I'll zoom back in and we'll update some the different labels and whatnot on here.
21
00:01:13,760 --> 00:01:21,080
First off I'll find a label and change it to heights I'll change the method name too on height change
22
00:01:23,540 --> 00:01:30,260
I'll change the second label to height as well and then finally I this interpolation we're gonna print
23
00:01:30,260 --> 00:01:32,950
out the height property.
24
00:01:33,080 --> 00:01:36,560
All right I'm going to save this and then flip back on my browser and see how we're doing.
25
00:01:37,190 --> 00:01:41,300
We've got our input right here and I can enter in some kind of number with a decimal.
26
00:01:41,420 --> 00:01:46,240
It turns out that very often we want to say trim off a decimal from the very end of a number.
27
00:01:46,310 --> 00:01:49,750
We really only want to do that when we print the number out on the screen.
28
00:01:49,760 --> 00:01:53,450
Good example for this is well showing your height as centimeters.
29
00:01:53,480 --> 00:01:58,310
Now to be honest with you I live in the U.S. So I use the imperial system as opposed to metric but in
30
00:01:58,310 --> 00:02:02,180
my experience it turns out what I've seen is that a lot of people when they express their height in
31
00:02:02,180 --> 00:02:07,850
centimetres they don't often throw on a decimal for trying to shore height as centimeters right here.
32
00:02:07,940 --> 00:02:13,430
Maybe we want to trim off the decimal from the very end and that is where the decimal cut pipe comes
33
00:02:13,430 --> 00:02:20,020
into play we can use the decimal pipe to very easily customize how a number is printed out on the screen
34
00:02:20,240 --> 00:02:22,360
when it has a decimal on it.
35
00:02:22,370 --> 00:02:23,220
Make use this.
36
00:02:23,240 --> 00:02:28,100
We're going to write out our expression to actually print out that variable in the pipe symbol and the
37
00:02:28,100 --> 00:02:29,670
word number.
38
00:02:29,810 --> 00:02:34,740
After that we can then provide some argument which is called right here digits info.
39
00:02:34,780 --> 00:02:38,170
Is going to customize exactly how the number gets printed.
40
00:02:38,180 --> 00:02:39,920
Let's take a look at this pipe.
41
00:02:39,980 --> 00:02:46,550
I can sort of my template I'll add in the symbol and number I'll provide an argument that has a string
42
00:02:46,730 --> 00:02:47,530
inside the string.
43
00:02:47,540 --> 00:02:53,300
We're gonna provide a formatting statement but this formatting statement has a kind of interesting formatting
44
00:02:53,300 --> 00:02:54,060
to it.
45
00:02:54,260 --> 00:03:02,730
When we first show you how it works I'm gonna write out one point zero dash zero the way we read this
46
00:03:02,940 --> 00:03:09,570
is it says to the left hand side of the decimal printout at most one digit and to the right hand side
47
00:03:09,570 --> 00:03:15,640
the decimal print out at least zero digits and up to zero digits.
48
00:03:15,670 --> 00:03:19,150
Let's take a look at what this actually does inside the browser and I think you'll get an idea of how
49
00:03:19,150 --> 00:03:21,230
to work with that rather quickly.
50
00:03:21,300 --> 00:03:28,180
I'm gonna save that look back over now if I enter in some value in a decimal whenever I enter as a decimal
51
00:03:28,300 --> 00:03:31,310
just falls off and it doesn't actually get printed out.
52
00:03:31,470 --> 00:03:37,120
And the reason for that is I said print out at most or at least zero digits to the right hand side of
53
00:03:37,120 --> 00:03:37,750
the decimal.
54
00:03:37,840 --> 00:03:43,000
And at most zero which effectively means print out no digits to the right.
55
00:03:43,000 --> 00:03:48,490
If I change this to something like 1 dash 3 we would read this as saying print out at least 1 to the
56
00:03:48,490 --> 00:03:56,180
right and at most 3 to the right if I save that and run it again I can now write out say 100 hundred
57
00:03:56,420 --> 00:04:02,420
and I'll see what I get at least one digit to the right was 0 is added on arbitrarily even if my original
58
00:04:02,420 --> 00:04:08,650
number do not have it if I then start to add on some decimal here it's going to print out up to three
59
00:04:08,650 --> 00:04:15,220
digits but as soon as I enter more than 3 0 they don't get printed and to be aware that angular does
60
00:04:15,220 --> 00:04:16,810
use some rounding here.
61
00:04:16,810 --> 00:04:26,510
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
62
00:04:26,510 --> 00:04:28,430
of interesting about this formatting right here.
63
00:04:28,430 --> 00:04:34,850
If you start to put in like give me nine digits till after the period then the way angular treats that
64
00:04:34,880 --> 00:04:38,820
as well I'm going to give you nine digits to the left of the period.
65
00:04:38,840 --> 00:04:45,490
Even if you just enter one number like so be a little bit careful with that number right there back
66
00:04:45,540 --> 00:04:51,870
injury that time you're going to want to use just one unless you have a very very special use case OK.
67
00:04:51,880 --> 00:04:54,250
So that's pretty much it for the decimal type.
68
00:04:54,300 --> 00:04:55,770
We use that thing very frequently.
69
00:04:55,770 --> 00:05:01,530
Any time that we want to print out and format some kind of number yes let's take a quick pause right
70
00:05:01,530 --> 00:05:03,530
here and continue in just a minute.
7679
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.