- 00:00:00 why come back so in the last video I
- 00:00:04 finished without showing you how we can
- 00:00:07 actually display some data on the screen
- 00:00:09 but probably you were able to do this if
- 00:00:12 you watched my other angular 2 series
- 00:00:15 here or you bought my angle – udemy
- 00:00:18 course which of course is even better
- 00:00:19 but in case you did neither of the two
- 00:00:22 things which is okay I will show you how
- 00:00:25 we do it
- 00:00:25 we will use another form of data binding
- 00:00:29 remember until now we learned about
- 00:00:31 string interpolation which is using
- 00:00:34 these these double curly braces to
- 00:00:36 output well strings in our HTML document
- 00:00:41 well another form there are four in
- 00:00:44 total by the way and you can see them
- 00:00:46 all in my other language of course we
- 00:00:47 will probably see them all in this
- 00:00:49 course too so another form is property
- 00:00:51 binding property binding that's what the
- 00:00:53 name implies it binds data to some
- 00:00:55 properties now we can bind data to
- 00:00:59 properties of HTML elements like for
- 00:01:01 example the value property of an input
- 00:01:04 element we can bind data to that so that
- 00:01:06 we set the value of the input element we
- 00:01:11 can find properties to the reactive
- 00:01:14 properties so if we have some kind of
- 00:01:18 directive where we want to pass
- 00:01:20 something I and you will see this later
- 00:01:22 in this course and we can find
- 00:01:24 properties to that kind of our
- 00:01:26 directives by the way components to our
- 00:01:28 custom components we can bind properties
- 00:01:30 there too so we have a property here in
- 00:01:33 our Webber item does Webber item
- 00:01:35 property and it would be great if some
- 00:01:37 data was bound to this variety now in
- 00:01:41 order to be able to do this we have to
- 00:01:43 tell angular 2 that this very component
- 00:01:46 here property here excuse me is a
- 00:01:49 property which well where data can be
- 00:01:54 bound to which can be used in data
- 00:01:56 binding there are two ways to define
- 00:01:59 this the first is to add a number
- 00:02:02 metadata here another configuration to
- 00:02:04 our metadata which is called inputs
- 00:02:07 this takes an array with a lot of
- 00:02:10 strings in it and each string defines
- 00:02:12 which
- 00:02:14 properties of this component can be used
- 00:02:17 with property binding so for example I
- 00:02:20 could write whoever item here and this
- 00:02:24 would well enable us to use this am with
- 00:02:28 property binding now let me show you how
- 00:02:32 property binding then works in my weber
- 00:02:36 list component here i will pass data to
- 00:02:41 my weber item with this property binding
- 00:02:43 i just set up and i can do this by using
- 00:02:46 square brackets here and then i type
- 00:02:49 weber items the name of the property to
- 00:02:52 which i'm binding
- 00:02:54 whoever I tend therefore here whoever I
- 00:02:58 think this name is the one I'm binding
- 00:03:02 to because I had abled property binding
- 00:03:04 for this property and here in the
- 00:03:07 quotation marks
- 00:03:08 I didn't say what do I want to bind now
- 00:03:11 this is also weber item but yeah i know
- 00:03:14 it might look a little confusing now but
- 00:03:16 this weber item any quotation marks
- 00:03:18 refers to this local variable which
- 00:03:21 again is the weber item we're currently
- 00:03:24 at this current iteration in our loop
- 00:03:27 here whereas the weber item in the
- 00:03:29 square brackets refers to the property
- 00:03:33 to which were binding let me save this
- 00:03:36 and now you can see it reloaded and we
- 00:03:39 actually see our data so passing the
- 00:03:41 data into the child is working now as we
- 00:03:45 already saw the naming was kind of
- 00:03:48 confusing here and maybe we don't really
- 00:03:52 like weber item here but we like weber
- 00:03:55 item here it's a good property name here
- 00:03:58 so can we change it such that our
- 00:04:01 internal name and the component to which
- 00:04:04 we're sending the data uses weber item
- 00:04:07 but all other components which are
- 00:04:10 binding to this property use let's say
- 00:04:12 chest item yes we can do this
- 00:04:16 and we do this by adding a colon here
- 00:04:18 and then item this allows us to specify
- 00:04:23 an alias which means internal
- 00:04:27 we're using Weber item but externally
- 00:04:30 item will be the name now as you can see
- 00:04:33 our app is broken on this because we're
- 00:04:36 still using Weber item here this does
- 00:04:38 not work anymore because externally
- 00:04:41 outside our Weber ID and component we
- 00:04:43 now have to use item as you can see now
- 00:04:45 it's working again so this is how we
- 00:04:49 assign such an alias now if you remember
- 00:04:53 I was talking about two possibilities of
- 00:04:56 setting up data binding
- 00:04:58 now using the inputs metadata here is
- 00:05:00 one of them I'm going to comment this
- 00:05:03 out to show you the second one let me
- 00:05:05 save this now you'll see it's broken of
- 00:05:07 course and we need the input annotation
- 00:05:10 which we add by using at input and sign
- 00:05:15 a general type script allows us to add
- 00:05:17 decorators annotations to certain
- 00:05:20 elements this cases property now we're
- 00:05:24 missing an import here import here and I
- 00:05:26 already automatically added this but you
- 00:05:29 have to make sure to add this input
- 00:05:31 import from energy quarry you only need
- 00:05:34 this when using this add input
- 00:05:36 annotation you're not needing this when
- 00:05:39 you're setting up inputs in our
- 00:05:41 component metadata because the component
- 00:05:43 metadata is already imported here so now
- 00:05:47 this will do pretty much the same but in
- 00:05:49 order to also use an alias here we have
- 00:05:52 to define as Elias inside the
- 00:05:55 parentheses here so we just used item
- 00:05:58 and therefore I'm just adding item here
- 00:06:00 and now it's working again now whichever
- 00:06:03 way you prefer is really up to you this
- 00:06:08 way using it in a component metadata
- 00:06:10 groups all the definitions in one
- 00:06:13 central place at the top of our file and
- 00:06:15 what a component metadata however this
- 00:06:18 way annotating each property on its own
- 00:06:22 allows you to very quickly see which
- 00:06:25 properties are bound and which are not
- 00:06:27 and finally the decision is up to you so
- 00:06:31 this is how we pass data into our
- 00:06:33 components by using property binding and
- 00:06:35 now we're actually outputting the items
- 00:06:38 we have an hour
- 00:06:40 arrey by looping freedom and binding the
- 00:06:43 data to our Weber item component see you
- 00:06:46 next video bye
