- 00:00:01 right now my application doesn't really
- 00:00:03 look like the one we saw at the
- 00:00:05 beginning well let's work on this and
- 00:00:07 replace our static code here a bit I
- 00:00:10 actually want to render lists of items I
- 00:00:13 got on the market so in my market
- 00:00:16 component here I'll add a new property
- 00:00:19 to disclose which I'll simply name
- 00:00:23 collectibles for example and there
- 00:00:26 should be an array of items we can
- 00:00:28 collect now how might satchel item look
- 00:00:32 like let's say a item is a JavaScript
- 00:00:34 object which has a description saying
- 00:00:38 whatever is something and then a type
- 00:00:41 like book this is how a collectible
- 00:00:45 should look like in this application at
- 00:00:47 least of course you may configure this
- 00:00:49 in a different way I created some
- 00:00:51 collectibles in advance and I'm just
- 00:00:54 pacing them in here so that we have some
- 00:00:55 data to work with so these are my
- 00:00:58 collectibles here now I want to output
- 00:01:01 these collectibles here in my HTML
- 00:01:04 template of this component so somehow I
- 00:01:07 need to loop through them and then
- 00:01:09 render the same code over and over again
- 00:01:12 for each collectable I'm talking about
- 00:01:14 this list item here this code should be
- 00:01:17 copied for each item in my array here
- 00:01:19 turns out angular 2 makes this really
- 00:01:22 easy I can add a so-called structural
- 00:01:25 directive to this list item directives
- 00:01:29 are just little commands so to say we
- 00:01:32 can place directly in the HTML code
- 00:01:34 which Anglet you will identify at
- 00:01:37 runtime and then do something based on
- 00:01:39 the command now we can write our own
- 00:01:41 ones but I go to all the ships with a
- 00:01:44 couple of built-in ones
- 00:01:45 the directive we add here is ng 4 and ng
- 00:01:50 4 is just a name of it two star signals
- 00:01:52 that this is a structural directive it
- 00:01:54 belongs to this directive here and
- 00:01:56 between the quotation marks we write our
- 00:01:58 loop logic now the logic here follows
- 00:02:02 the syntax of a for off loop in es6 or
- 00:02:05 typescript code so the latest version of
- 00:02:08 JavaScript here the some text there is
- 00:02:11 let to create a local variable then
- 00:02:14 any name you choose item for example off
- 00:02:16 and then the name of the array you want
- 00:02:19 to loop through collectibles this will
- 00:02:22 loop through all the collectibles and
- 00:02:25 assign each collectable to dislocation
- 00:02:28 in the current iteration it will then
- 00:02:32 recreate this list item here as often as
- 00:02:35 needed to cover all the collectibles now
- 00:02:38 if I save this and we have a look at
- 00:02:39 this application once this reloads you
- 00:02:42 will see that it does rerender this four
- 00:02:45 times which makes sense since we got
- 00:02:47 four items in the collection here but of
- 00:02:50 course the content hasn't changed so in
- 00:02:53 order to output dynamic content we can
- 00:02:56 use string interpolation one form of
- 00:02:59 data binding support supported by
- 00:03:01 angular 2 here we do this fire using
- 00:03:05 double curly braces opening and closing
- 00:03:07 and in between we can output JavaScript
- 00:03:11 code though only one-liners and no block
- 00:03:15 statements like functions or if whereas
- 00:03:17 something like that though you could use
- 00:03:19 ternary statements here but for now what
- 00:03:23 I want to output in the batch here is
- 00:03:24 the type of my item so item dot type so
- 00:03:28 you see I can access my item variable
- 00:03:31 here directly between this between these
- 00:03:35 curly braces like if I were in normal
- 00:03:38 JavaScript code I also want to output
- 00:03:41 the title here so let me add or the
- 00:03:45 description to be precise so let me add
- 00:03:46 item description here and with that if I
- 00:03:49 save this you will see that once this
- 00:03:52 reloads now we're outputting the actual
- 00:03:57 content of the list this is how easy
- 00:03:59 does this with angular 2 very easy to
- 00:04:02 leap through it very easy to output
- 00:04:04 dynamic data all we did here is use the
- 00:04:09 ng4 directive and the string
- 00:04:12 interpolation and what you offers us to
- 00:04:14 output the content directly in the HTML
- 00:04:17 content here with that we're of course
- 00:04:21 outputting our list here but we're not
- 00:04:23 really able to edit your collection that
- 00:04:27 doesn't work
- 00:04:27 and for that we need to hook up these
- 00:04:30 buttons here we can do this by adding an
- 00:04:33 hour form of data binding
- 00:04:35 we already saw string interpolation
- 00:04:37 whoopsie double curly braces this is
- 00:04:40 useful if you want to output something
- 00:04:41 in our HTML code
- 00:04:43 we also would have data by the property
- 00:04:46 binding for a similar approach but here
- 00:04:49 I'm going to cover event binding which
- 00:04:51 is for the opposite to get something out
- 00:04:53 of the HTML code of the Dom to listen to
- 00:04:56 events I want to listen to events
- 00:04:59 happening on this button here and adding
- 00:05:02 event binding is very easy you specify
- 00:05:05 the name of the event here click and
- 00:05:08 then you put it into parenthesis like
- 00:05:11 this this is also a syntax known by
- 00:05:15 angular 2 and it means whenever a click
- 00:05:18 happens do whatever I now write between
- 00:05:20 the double quotation marks here now here
- 00:05:23 I want to execute a method which I'll
- 00:05:26 call on add to collection and add
- 00:05:30 parentheses here Q so this method which
- 00:05:33 I haven't created yet will be executed
- 00:05:36 whenever I click this button now how do
- 00:05:39 you know which events are available well
- 00:05:42 you can basically look up the default
- 00:05:45 lists for HTML elements which have all
- 00:05:48 the events like on click on focus on
- 00:05:50 blur depending on the element of course
- 00:05:53 and then you leave away the on part and
- 00:05:56 just have the event name like click
- 00:06:00 instead of on click and so on so this is
- 00:06:04 how we can listen to an event of course
- 00:06:06 and now I need to add this method to my
- 00:06:08 component body here so here in my
- 00:06:12 component I'll add on add to collection
- 00:06:14 the method I set up in my template here
- 00:06:18 and you may ignore the constructor and
- 00:06:21 ng own in a method for now the
- 00:06:23 constructor is the built-in constructor
- 00:06:24 every type of class has and ng on n it
- 00:06:27 is a certain life cycle hook when a
- 00:06:30 component is created engli to reach is
- 00:06:32 served several phases in this life cycle
- 00:06:34 of component creation and this would
- 00:06:36 allow us to execute some code in one of
- 00:06:38 these phases but for now let's focus on
- 00:06:41 the on add to collection method here
- 00:06:43 while to see that we actually did
- 00:06:45 something let me simply alert hello here
- 00:06:49 so that we can see that our event
- 00:06:51 listener works now once this page
- 00:06:54 reloads if I click any of the green
- 00:06:57 buttons you see the hello alert here
- 00:07:00 great so this is working of course with
- 00:07:03 that we're still not adding it to our
- 00:07:05 collection though because for this we're
- 00:07:07 going to use another piece or concept
- 00:07:12 English who offers us we're going to
- 00:07:14 have a look at this in the next video
