Coding

LISTS, EVENTS & DATABINDING – Angular 2.0 Final – Getting Started

  • 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