Angular 2 Fundamentals 26 [w/ subs]



00:00:01 – okay the events application that we've
00:00:03 – been writing has been desperately
00:00:05 – waiting for us to demonstrate ng for so
00:00:08 – far this events list page has been
00:00:10 – listing only a single event let's update
00:00:13 – our application so that it can display
00:00:14 – multiple events ng four is going to make
00:00:17 – this very easy for us and the fact that
00:00:20 – we've encapsulated all the display logic
00:00:22 – for an event into this event thumbnail
00:00:24 – component is going to help
00:00:26 – so first let's update our data to have
00:00:29 – more events currently we just have this
00:00:32 – one event object here eventually we'll
00:00:34 – have this data come from an API call but
00:00:37 – for now we'll just leave it right here
00:00:38 – this is going to be a lot of data so
00:00:41 – we're not going to want to type all of
00:00:42 – this in so this is another file that
00:00:45 – we've provided in our helper repo in
00:00:47 – github so in this repo under the
00:00:49 – miscellaneous directory there's this
00:00:51 – event data JS file so let's look at the
00:00:54 – raw view for that we'll copy all of this
00:00:57 – and then we're just going to paste it
00:00:58 – all in right here in place of this event
00:01:01 – object okay so you can see this is now
00:01:04 – an array called events and that array
00:01:07 – now contains multiple event objects and
00:01:10 – the event objects are the same shape as
00:01:12 – they were except that they have a little
00:01:14 – bit more data you can see that we've
00:01:16 – added sessions to the events don't worry
00:01:18 – about that right now we'll use that data
00:01:20 – later all of this data is really
00:01:22 – obnoxious in our controller we'll move
00:01:25 – that out of here when we talk about
00:01:26 – services in the services module and
00:01:29 – eventually it'll come from an API but
00:01:31 – for now it'll just stay here
00:01:33 – so our page will be broken right now
00:01:35 – because we were binding to an event
00:01:37 – object that was singular and now we have
00:01:40 – an event plural array and so up here we
00:01:44 – just need to use ng 4 to bind to our new
00:01:46 – events array so we just want to put the
00:01:49 – ng 4 directive on the element that we
00:01:51 – want to repeat for each item in the
00:01:53 – array so that's our event some nail
00:01:55 – elements we'll add it here ok and then
00:01:58 – we'll leave this binding here except
00:01:59 – that it's going to bind to event instead
00:02:02 – of event 1 and that is the same event as
00:02:05 – this one right here so we'll come back
00:02:06 – and dissect this statement in a minute
00:02:08 – for now let's go over and take a look at
00:02:11 – our web page so if i refresh this page
00:02:13 – here
00:02:14 – you can see that I'm now displaying
00:02:17 – multiple events that was really easy
00:02:20 – okay so let's take a closer look at this
00:02:22 – ng4 statement the first thing that
00:02:24 – stands out is this asterisk that
00:02:26 – indicates that this ng4 directive is a
00:02:29 – structural directive structural
00:02:32 – directives are different from other
00:02:33 – directives because structural directives
00:02:35 – actually change the shape of the Dom
00:02:37 – they actually add or remove HTML
00:02:40 – elements from the HTML document
00:02:42 – they don't just hide them they actually
00:02:44 – remove them or add them in G 4 is a
00:02:48 – structural directive because it will add
00:02:49 – an HTML element for each item in the
00:02:52 – array and so it is prefaced with an
00:02:55 – asterisk like this okay next let's take
00:02:57 – a look at the expression that's being
00:02:59 – passed in to the ng 4 directive looking
00:03:02 – at the first part of this expression it
00:03:04 – does just what you think it is declaring
00:03:07 – a variable so we're defining a variable
00:03:08 – called nth and then you can see we're
00:03:11 – accessing that variable in our template
00:03:13 – binding here so this is creating a local
00:03:15 – variable just like we did with the hash
00:03:17 – tag syntax when we were talking about
00:03:19 – component communication using local
00:03:22 – variables and the rest of this syntax is
00:03:24 – something specific to ng for this just
00:03:27 – tells angular that events is the array
00:03:30 – to loop over and for each item in the
00:03:32 – array and g4 is going to duplicate this
00:03:34 – event thumbnail element and assign the
00:03:36 – value of each array element to this
00:03:38 – local variable we can then use that
00:03:40 – local variable anywhere inside the
00:03:42 – element that's being repeated to
00:03:44 – demonstrate this a little bit further
00:03:46 – let's move this ng for statement up to a
00:03:48 – higher element so we'll put it on this
00:03:50 – div here so now this entire div is going
00:03:53 – to be repeated and you'll see that event
00:03:56 – is still accessible down here but now
00:03:58 – we're going to get a lot of extra stuff
00:04:00 – repeated too so let's go see what this
00:04:02 – does okay you can see that this heading
00:04:05 – is now being repeated also so ng 4 will
00:04:08 – repeat the element that it's put on plus
00:04:10 – all of the elements inside of it let's
00:04:12 – go ahead and move this back down okay
00:04:14 – now let's just style this a little bit
00:04:16 – we're going to use bootstrap
00:04:18 – to add a row class on a containing div
00:04:21 – around this event thumbnail and then
00:04:24 – we're going to create a column class
00:04:27 – development and that will also contain
00:04:29 – our thumbnail element and then let's
00:04:32 – move our ng4 up to this development okay
00:04:36 – so this is just going to take advantage
00:04:38 – of bootstraps grid classes in order to
00:04:41 – build a grid of these elements and so
00:04:43 – this div with a class of column five is
00:04:47 – going to be repeated for each event
00:04:49 – let's go take a look at that alright
00:04:52 – cool so now we have each event showing
00:04:54 – as a little thumbnail on our page and
00:04:56 – all we needed was that simple ng4
00:04:58 – statement let's just go fix the styling
00:05:01 – on this so that these are all the same
00:05:03 – height so we'll come over to our event
00:05:05 – thumbnail and we'll just add a style
00:05:08 – right here okay let's see how that looks
00:05:11 – now
00:05:11 – all right cool so now they're all nice
00:05:14 – and uniform it's really nice to be able
00:05:16 – to think about styling a component and
00:05:19 – to know we'll just go to that component
00:05:21 – to add the Styles instead of trying to
00:05:23 – think about a separate hierarchy of CSS
00:05:25 – files and thinking about where to go
00:05:27 – find those files okay cool so that's all
00:05:30 – there is to using ng4 and there's a
00:05:32 – practice exercise for this clip so go
00:05:34 – check that out


Video Url:
http://youtu.be/-_iPAJCuIs8

Comments

comments