Angular 2 Fundamentals 30 [w/ subs]



00:00:01 – okay so we've shown how to change the
00:00:03 – visibility of elements using ng-if and
00:00:06 – by binding to the hidden property of a
00:00:08 – Dom element but what if there is a part
00:00:10 – of our document that we want to change
00:00:12 – based on multiple possible values of an
00:00:15 – expression that's where ng-switch comes
00:00:17 – in so let's add something to our event
00:00:20 – that will tell us whether the conference
00:00:22 – starts earlier or later based on the
00:00:24 – event time so we're going to add a div
00:00:27 – right here and inside that div will have
00:00:30 – three spans one that says early start
00:00:33 – one that says late start and then
00:00:37 – another one that says normal start okay
00:00:41 – and then we want to show and hide these
00:00:42 – based upon the event time so I'm going
00:00:45 – to add an NG switch up here and that
00:00:48 – will just get bound to the event time
00:00:50 – and notice for ng F and then G switch
00:00:53 – and other things that we also have to
00:00:55 – use the safe navigation operator to
00:00:57 – guard against nulls okay so now I have
00:01:00 – an NG switch that is bound to my event
00:01:02 – time now on my spans I just need to add
00:01:05 – ng switch case statements and then I set
00:01:09 – this to the value that should allow
00:01:10 – early start to be displayed so in this
00:01:14 – case I'm going to bind this to the value
00:01:17 – of 8:00 a.m.
00:01:18 – okay so this span has an NG switch case
00:01:22 – directive that is bound to the string
00:01:25 – value 8:00 a.m. let's do the same thing
00:01:28 – for these others so for late start
00:01:30 – we will bind it to the value 10:00 a.m.
00:01:32 – and then for normal start this will be
00:01:36 – our default case so if 8:00 a.m. doesn't
00:01:38 – match and 10:00 a.m. doesn't match then
00:01:40 – this will be displayed and we do that
00:01:42 – with ng switch default okay so now we
00:01:45 – have this div that's bound to our event
00:01:47 – time using ng switch and the cases our
00:01:50 – early start late start and normal start
00:01:52 – with normal start being the default okay
00:01:55 – so let's go take a look at this I'm
00:01:57 – going to refresh my page here okay cool
00:02:00 – so you can see this one that starts at
00:02:01 – 10:00 a.m. says late start this one that
00:02:04 – starts at 9:00 a.m.
00:02:05 – says normal start and this one that
00:02:07 – starts at 8:00 a.m. says early start ok
00:02:10 – cool that was easy and we would like
00:02:12 – these values to show up right after the
00:02:14 – time so let's go over and take a look at
00:02:16 – our HTML here so they're showing on a
00:02:19 – new line because this is a div not a
00:02:22 – span really we want this to just show up
00:02:25 – right after the time up here on the same
00:02:27 – line so just to demonstrate that there's
00:02:30 – nothing special about this ng-switch
00:02:32 – it doesn't have to be on its own div we
00:02:35 – could take this and move that up here
00:02:37 – like this and then we can move these
00:02:40 – spans up here and delete this div since
00:02:44 – this will be displaying right after the
00:02:45 – time let's add some parentheses around
00:02:47 – it okay let's go take a look at that
00:02:51 – alright cool so now that's showing up on
00:02:53 – the same line now our ng-switch example
00:02:57 – here is using event time which is a
00:02:59 – string and so the ng-switch case values
00:03:02 – are also strings notice that they are
00:03:04 – wrapped in apostrophes but ng-switch
00:03:07 – doesn't have to work with strings it can
00:03:10 – be any data type and then the ng-switch
00:03:12 – case statement expressions should also
00:03:15 – return the same data type and that's all
00:03:18 – there is to using ng-switch and there's
00:03:20 – a practice exercise for this clip so go
00:03:22 – check that out


Video Url:
http://youtu.be/MClOrlzE2c8

Comments

comments