Coding

Angular 2 Tutorial (2016) – Two Way Databinding

  • 00:00:03 welcome back everyone this is a very
  • 00:00:06 short video I'm just going to do some
  • 00:00:08 cleanup in this video as you can already
  • 00:00:11 see I updated the styling a little bit
  • 00:00:13 to have it look a little bit nicer
  • 00:00:15 because in the end it should be a nice
  • 00:00:19 looking app were creating here and not
  • 00:00:20 just some rough examples tied together
  • 00:00:23 now what did I do when it comes to
  • 00:00:25 styling I created a second CSS file or a
  • 00:00:29 CSS file as it will get compiled by a
  • 00:00:32 gal pyram in my setup and here I
  • 00:00:35 basically put all these sides that are
  • 00:00:37 relevant for this contact list and
  • 00:00:40 therefore in my contact list component
  • 00:00:42 here I'm importing these Styles here in
  • 00:00:48 my style URLs array only the contact
  • 00:00:52 list Styles before I made this change I
  • 00:00:54 had app CSS here now the app file
  • 00:00:59 contains styling that applies to the
  • 00:01:01 whole website the whole application I
  • 00:01:04 guess it makes sense when you consider
  • 00:01:05 the name of this file and it is
  • 00:01:08 therefore imported right here in the
  • 00:01:10 index.html so what did I do well I just
  • 00:01:14 added some margins centered my app and
  • 00:01:17 when you hover over the names you know
  • 00:01:20 we see that they are clickable because
  • 00:01:22 you have the cursor here and with that
  • 00:01:24 nice visual effect and well besides that
  • 00:01:27 everything's the same now what I also
  • 00:01:29 want to add here is we got our two-way
  • 00:01:32 binding going on here but only with the
  • 00:01:34 first name at the moment I want to
  • 00:01:37 expand this form here so that we can
  • 00:01:40 edit every attribute of our contacts
  • 00:01:44 here so let's do this now I'll therefore
  • 00:01:48 head over to my contact component here
  • 00:01:50 and as of now I only got my ng model set
  • 00:01:54 up for my first name so what I will do
  • 00:01:57 here is I will actually create a nice
  • 00:02:01 little uniform so to say by just adding
  • 00:02:05 my first name here my last name and then
  • 00:02:10 I'll basically just copy
  • 00:02:15 this year let's see how this looks yeah
  • 00:02:20 that that's what I want so gets rid
  • 00:02:22 let's get rid of this and add it here
  • 00:02:25 for the last name then here I wanted to
  • 00:02:34 add it for my phone number and here for
  • 00:02:38 the email address let's reload this yeah
  • 00:02:47 now I don't want it line up this way
  • 00:02:49 obviously so what I will do to to fix
  • 00:02:53 this is I I will add some styling to
  • 00:02:56 this form here too
  • 00:02:58 so the bottom part here notice that at
  • 00:03:02 the moment we're not importing any style
  • 00:03:04 sheet and I won't import one I was just
  • 00:03:07 add the Styles meta tag Co no style URLs
  • 00:03:15 but just Styles and this also takes an
  • 00:03:18 array with a string in it but this
  • 00:03:21 string will just provide the Styles in
  • 00:03:24 this document so to say and the styling
  • 00:03:26 that I want to apply is that each label
  • 00:03:29 here has its input box next to it and
  • 00:03:32 then we have a line break now to create
  • 00:03:35 this I would just create another div in
  • 00:03:38 here and I will really just wrap my my
  • 00:03:47 input fields here and my my label so to
  • 00:03:49 say inside this div now I'm already
  • 00:03:54 repeat this now it would obviously be
  • 00:04:00 nice to have these boxes lined up here
  • 00:04:04 so let me add this and to do this I will
  • 00:04:07 use the label tag to wrap my Mia my
  • 00:04:14 labels
  • 00:04:19 now let's give these labels and styling
  • 00:04:30 now let's give to use label some styling
  • 00:04:33 by making them an inline block element
  • 00:04:36 and giving them just a width of let's
  • 00:04:39 say 100 pixels let's see how that looks
  • 00:04:45 has to be a little bit more so that the
  • 00:04:47 phone number doesn't break here see yeah
  • 00:04:51 that's good now I will also increase the
  • 00:04:54 width of my input elements here give
  • 00:04:59 them a width or let's say 250 pixels
  • 00:05:03 let's see how that looks
  • 00:05:05 yeah so I'm good with that and as you
  • 00:05:09 can see all our data now gets loaded in
  • 00:05:12 this form and if we add a bit and let's
  • 00:05:16 say we add this in a way that we can
  • 00:05:18 remember it now we click on another name
  • 00:05:21 and we go back and we still get a safe
  • 00:05:23 here so now we got really our two-way
  • 00:05:24 binding going on for all of our contact
  • 00:05:27 fields we have your not only the first
  • 00:05:29 names but all the names and I think that
  • 00:05:33 was some necessary tidy up to get our
  • 00:05:35 app in the right direction and in the
  • 00:05:38 next videos we will then focus on more
  • 00:05:41 new features see you later bye