Angular 2 Fundamentals 74 [w/ subs]



00:00:00 – now there's a few problems on are all
00:00:03 – events page that we can fix with pipes I
00:00:05 – want to avoid the most obvious one the
00:00:07 – problems with formatting dates for just
00:00:10 – a second instead fix some easier one
00:00:12 – which is the names of the events notice
00:00:15 – the names of the events are cased
00:00:17 – however the data was given to us I'd
00:00:20 – like to fix that I want all events in
00:00:21 – uppercase so we can go over to our code
00:00:24 – and into our event thumbnail component
00:00:26 – TS and here we have the event name we
00:00:29 – can add a simple pipe of uppercase this
00:00:33 – is one of the built-in pipes in angular
00:00:35 – 2 and we'll save that go back and
00:00:37 – refresh the page and now all the names
00:00:40 – are in complete uppercase I get our page
00:00:43 – a little bit more uniform look and in
00:00:45 – the details we've got the same problem
00:00:48 – here the name is not uppercase so let's
00:00:51 – go into the details page and here you're
00:00:54 – going to go into the HTML component and
00:00:56 – have the same uppercase pipe and will
00:00:59 – refresh and now the name is all in
00:01:02 – uppercase
00:01:02 – now we've got the obvious problem the
00:01:06 – date these dates are obviously not the
00:01:08 – way that we want them formatted so we're
00:01:11 – going to go in to the date and we're
00:01:13 – going to add a date pipe we'll just
00:01:15 – simply add date save that refresh
00:01:19 – we can see that already the data is
00:01:20 – formatted much nice as it was before now
00:01:23 – this is the default formatting for the
00:01:24 – date pipe we can actually change the
00:01:26 – formatting using parameters parameters
00:01:28 – on types are very simply you put in a
00:01:31 – colon and then you can add the parameter
00:01:33 – that you want in the case the date pipe
00:01:35 – the parameter that it takes in is a
00:01:36 – string and there are several values for
00:01:40 – what the string can be there's some pre
00:01:42 – built-in values like short
00:01:45 – that's how the short looks or just short
00:01:47 – date which gets rid of the time and
00:01:50 – that's what I want to use you can also
00:01:53 – mess around with values like why for the
00:01:55 – year at Capital m for the month D for
00:01:59 – the day and you can add in slashes on
00:02:02 – that if you want so let's make this
00:02:05 – change will see the year a slash the
00:02:08 – month of the day we're going to go back
00:02:10 – to short date it's a nice simple format
00:02:15 – and we want to make that same change in
00:02:17 – our thumbnail component
00:02:22 – – fermented nice now the
00:02:24 – piece of data I want to put a pipe on
00:02:25 – and that is the price notice what the
00:02:27 – price looks fine it's got the dollar
00:02:29 – sign and in the price the formatting is
00:02:31 – just fine
00:02:32 – but the problem is is that we've
00:02:33 – hard-coded in our dollar sign right
00:02:36 – there and I don't want this hard-coded
00:02:38 – in I want this to be specified that
00:02:41 – opens me up later on in case I want to
00:02:42 – use different units I can parameterize
00:02:44 – that and some events can be in dollars
00:02:47 – some events can be in pound some could
00:02:49 – be in euros so we're going to change
00:02:52 – this to have a type of currency and
00:02:55 – we'll get rid of the dollar sign and of
00:02:59 – course we had to escape that rid of the
00:03:01 – backslash as well and if we save this
00:03:03 – and refresh you can see that that's now
00:03:06 – showing at USD for u.s. dollars five
00:03:09 – 99.99 USD here that's not what we want
00:03:13 – we don't want USD be still want the
00:03:15 – actual dollar sign so we're going to go
00:03:17 – back into our code we're going to add
00:03:20 – some parameters to the currency pipe we
00:03:23 – want to specify that this is in u.s.
00:03:24 – dollars so USD and here is where we
00:03:28 – could be reading this from our data I'm
00:03:30 – just going to leave this hard-coded USD
00:03:32 – for now but it gives us a place that in
00:03:34 – the future we could use different units
00:03:36 – and then I'm going to add a second
00:03:37 – parameter of true to indicate that I
00:03:40 – want this to be the symbolic
00:03:42 – representation not the three-letter code
00:03:45 – representation like USD so save that and
00:03:48 – refresh the page
00:03:50 – and we're now back to seeing the dollar
00:03:52 – silence and let's make that same change
00:03:55 – inside of our details page change price
00:03:58 – to currency filter with USD and true and
00:04:03 – get rid of the dollar sign and save back
00:04:07 – to the page and refresh
00:04:09 – and we've still got the dollar sign
00:04:10 – showing but we're now using a pipe to
00:04:13 – format the price and those are some of
00:04:15 – the more commonly used built in pipes in
00:04:17 – angular2 there are homework assignments
00:04:20 – for this clip so go ahead and do those
00:04:22 – now


Video Url:
http://youtu.be/6K6Vn-riVbg

Comments

comments