Coding

Angular 2 Full App Tutorial – Weather App – #6 Property Binding

  • 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