- 00:00:02 hey back I am in the last vision we left
- 00:00:06 with our possibility of seeing our list
- 00:00:09 here editing our list items here and
- 00:00:11 navigating to our new contact page but
- 00:00:14 we're not able to insert a new contact
- 00:00:16 as if no we're going to change this in
- 00:00:18 this video a good place to start is by
- 00:00:21 setting up our form here I will
- 00:00:24 therefore copy all of the code here
- 00:00:29 because this is how we edit our contact
- 00:00:32 and creating new one is pretty similar
- 00:00:37 copying this here and I won't need tag
- 00:00:43 inputs here I also won't need the
- 00:00:46 two-way binding because we're creating a
- 00:00:48 new contact we're not binding to an
- 00:00:50 existing one and that's the basic form
- 00:00:54 but we'll also need a button cue
- 00:00:57 submitted create contact and if I now
- 00:01:01 reload we see this form but obviously
- 00:01:03 nothing is happening when I click this
- 00:01:04 button because it doesn't wire it up to
- 00:01:07 anything now when I click this button I
- 00:01:11 obviously want this contact to be
- 00:01:13 inserted and I also want to be navigated
- 00:01:16 back to this contacts list so that we
- 00:01:18 can instantly see that it was inserted
- 00:01:20 now let's take care about the insertion
- 00:01:23 first we will use our service again at
- 00:01:27 the moment we've got a method to get our
- 00:01:28 contacts now we'll add a new one to
- 00:01:30 insert a contact now obviously this will
- 00:01:33 take an argument of type contact so we
- 00:01:36 will pass a complete compact
- 00:01:38 contact there into this function and I
- 00:01:41 will use again my promise to resolve my
- 00:01:45 data source in this case the contacts
- 00:01:49 variable we set up here now as I
- 00:01:52 mentioned in the video when we talked
- 00:01:54 about services first obviously in a real
- 00:01:57 app you would probably somehow query a
- 00:01:59 server create a connection to a server
- 00:02:02 but in this case well our contacts
- 00:02:05 variable is the data source and we will
- 00:02:07 come to setting up a data connection to
- 00:02:10 a server using a restful server as a
- 00:02:13 data source in a later video
- 00:02:17 now here we're resolving our contacts
- 00:02:20 variable and once it is resolved we can
- 00:02:22 access it with that then function and
- 00:02:25 here we will our have our fat arrow
- 00:02:28 function which will pass an argument of
- 00:02:32 the contacts area we just got and then
- 00:02:36 we will use this contacts area and push
- 00:02:40 our contact on it so we will add our new
- 00:02:44 contact to the area that's that now
- 00:02:48 won't work still because it isn't viral
- 00:02:50 up at all back in our new contact I will
- 00:02:54 set up a click event on this button here
- 00:02:57 where I will execute it on add contact
- 00:03:01 method and I won't pass any arguments as
- 00:03:04 of now now set up this method down here
- 00:03:07 on add contact and here I want you
- 00:03:11 access my service and insert a new
- 00:03:14 contact now remember if we want to
- 00:03:17 access our service we have to inject it
- 00:03:19 in this component now to do this I'll
- 00:03:22 set up my constructor here and I will
- 00:03:27 pass my contact service which I will
- 00:03:31 then automatically bind to a private
- 00:03:33 property so private contact service of
- 00:03:37 type contact service again automatically
- 00:03:41 imported for me here and then I can here
- 00:03:44 access this contact service and insert a
- 00:03:47 contact which I still have to create for
- 00:03:52 testing purposes I'll create a dummy
- 00:03:54 contact here which is basically just a
- 00:03:59 contact object which has a first name of
- 00:04:01 dummy a last name of contact and I won't
- 00:04:09 pass a phone number or email as of now
- 00:04:14 so pass the STEMI contact here and now
- 00:04:21 this won't work because if I click this
- 00:04:26 mmm the app is somehow broken
- 00:04:29 why could it be broken because we're
- 00:04:31 injecting the contact service here in
- 00:04:33 our constructor but our component
- 00:04:36 doesn't know anything about this service
- 00:04:38 so we have to set up our providers
- 00:04:41 metadata data here and array and here we
- 00:04:46 specify that we want to use the contact
- 00:04:48 service saved us reload and if we now
- 00:04:50 click create contact go back to our
- 00:04:52 contact list we can see our dummy
- 00:04:54 contact here now obviously we don't want
- 00:04:56 to inject them in contact we want to be
- 00:04:58 able to create a contact ourselves
- 00:05:00 because at the moment if we enter
- 00:05:02 anything here and create it it always
- 00:05:04 chance create systemic contact obviously
- 00:05:06 because this is the only thing we're
- 00:05:08 passing here now get let me get rid of
- 00:05:10 this dummy contact here and instead I'll
- 00:05:13 create a real contact last contact of
- 00:05:19 type contact and this will then be
- 00:05:26 obviously an object where I have a first
- 00:05:31 name of anything a last name anything
- 00:05:36 phone and email and then I can pass this
- 00:05:42 here now this data should be passed to
- 00:05:46 this method here so I have my first name
- 00:05:49 my last name my phone and by email and
- 00:05:52 then I can replace this quotation marks
- 00:05:56 here with the respective arguments or
- 00:05:59 parameters we're getting in this
- 00:06:01 function phone and email now to add or
- 00:06:09 to pass these arguments I'll have to do
- 00:06:12 something here in my template because at
- 00:06:14 the moment I don't know in which input
- 00:06:17 element which argument is passed or
- 00:06:21 embedded so to do this I'll give each of
- 00:06:25 these input views here a local variable
- 00:06:28 recall that we do this by adding a
- 00:06:31 hashtag in front of the very variable
- 00:06:33 name the first name last name e phone
- 00:06:39 and email
- 00:06:41 and then I can pass the data to my
- 00:06:45 method now if a word you pay pass the
- 00:06:47 full variable like first name then this
- 00:06:51 would not work because first name is not
- 00:06:54 only what we enter inside this input
- 00:06:57 element but it is the whole input
- 00:06:59 element so everything all configuration
- 00:07:02 or styling attached to this element so
- 00:07:03 in order to just pass the value I will
- 00:07:07 access the value property so first name
- 00:07:08 value last name value phone value and
- 00:07:13 email value now this method
- 00:07:20 hopefully looks a bit complicated to you
- 00:07:22 because well we have to pass all these
- 00:07:26 variables here and we have to have a
- 00:07:29 method which takes all these variables
- 00:07:30 here and here is a comma missing I see
- 00:07:32 and if we add a new input field we would
- 00:07:36 have to add it here and we would have to
- 00:07:38 change our method here and every change
- 00:07:41 would be very very complicated and if we
- 00:07:44 add validation it would be difficult and
- 00:07:45 who not really the kind of thing that
- 00:07:48 makes a lot of fun angular to has a
- 00:07:53 powerful form package so to say built-in
- 00:07:57 where we have a lot of methods and
- 00:07:59 functionalities to use in conjunction
- 00:08:02 with forms so this is the most difficult
- 00:08:05 way we could do it but as this is this
- 00:08:09 video focuses on how we can create a new
- 00:08:12 contact with the service and how we can
- 00:08:14 route back to our contact list I will
- 00:08:16 have an extensive forms videos coming up
- 00:08:20 obviously as this course will cover all
- 00:08:23 the basics of angular 2 I will talk
- 00:08:25 about forms in future videos but as of
- 00:08:28 now let's do it this way and then we
- 00:08:30 will find unit in future elections so
- 00:08:34 now that I pass this I save this and now
- 00:08:37 let's let's edit let's add a test
- 00:08:39 contact here let's call her Monica
- 00:08:43 Monica Arafah I give her a some random
- 00:08:50 phone number and Monica at gmail.com
- 00:08:55 create this contact and well that looks
- 00:08:58 pretty good to me let's create another
- 00:09:00 one like June Ober number number here
- 00:09:11 and June add yeah create her ok well
- 00:09:20 that seems to work great now the last
- 00:09:23 fingers I don't want to have to click up
- 00:09:25 here I want to be taken back
- 00:09:27 automatically when I click create
- 00:09:28 contact so to do this I will somehow
- 00:09:33 need a possibility to trigger this
- 00:09:36 routing out of this on add contact
- 00:09:39 function here and I can do this by
- 00:09:42 injecting the router into this new
- 00:09:45 contact component and then I can call a
- 00:09:47 method on the router object which is
- 00:09:50 called navigate which allows me to to
- 00:09:52 trigger a routing action so to say which
- 00:09:55 allows me to redirect the user to
- 00:09:58 another page even though he didn't click
- 00:10:00 any link to do this island check the
- 00:10:03 router here into my constructor private
- 00:10:06 router automatically bind it to the
- 00:10:08 router property here router again very
- 00:10:14 important make sure that you got this
- 00:10:16 import here and now I can call this
- 00:10:21 router navigate and now this navigate
- 00:10:25 method takes an array as an argument and
- 00:10:28 this area can contain different
- 00:10:32 configurations or some Artem ya
- 00:10:35 configuration to this routing action so
- 00:10:37 to say in this case we only need to name
- 00:10:40 of the route we want to navigate you
- 00:10:42 which if you can look it up here in our
- 00:10:45 app component has name contacts that's
- 00:10:48 the contact list so I will just enter a
- 00:10:51 string here contacts save this and let's
- 00:10:56 try it again add Monica here or buries
- 00:11:02 Monica at gmail.com again I got no
- 00:11:07 validation going
- 00:11:08 on here remember that we'll fix this in
- 00:11:11 a future with you create contact and
- 00:11:13 we're taking back now if you're a
- 00:11:16 careful watch sure there might be
- 00:11:19 something you feel a little bit strange
- 00:11:21 everybody why does this work I inject
- 00:11:25 the router here but I'm not setting it
- 00:11:29 up here the contact service wouldn't
- 00:11:32 work if I were to delete this why does
- 00:11:35 the router work the router works the
- 00:11:40 router can be injected because we're
- 00:11:43 setting it up here in our boot strap
- 00:11:46 method in our booty ass file we're
- 00:11:51 providing the information about our
- 00:11:53 router providers which are then injected
- 00:11:56 here the first time or used the first
- 00:12:01 time in our app component so the router
- 00:12:04 is something where inject more we're
- 00:12:08 setting up here on the top level in our
- 00:12:10 app component if we would not have this
- 00:12:13 here besides the fact that our whole app
- 00:12:16 wouldn't work we could not use it here
- 00:12:19 or two because angular 2 has a
- 00:12:22 dependency injection hierarchy which
- 00:12:26 basically means if a top component knows
- 00:12:30 how to inject something a component
- 00:12:33 nests inside it so a child component is
- 00:12:36 also available to use this injection
- 00:12:39 that's very important that you are aware
- 00:12:43 of this injection hierarchy so the
- 00:12:47 contact service has to be provided here
- 00:12:50 and in our contact list because these
- 00:12:54 two components are siblings they are not
- 00:12:57 in a child parent relation and that is a
- 00:13:00 very important thing to know that we get
- 00:13:02 this injection hierarchy thing going on
- 00:13:05 and angular at you and that's why this
- 00:13:07 doesn't work with the router here even
- 00:13:09 though we're not setting it up here in
- 00:13:11 our providers metadata so that's
- 00:13:14 everything I want to cover in this video
- 00:13:16 and next with you we'll have again a
- 00:13:18 look at routing and we will have a look
- 00:13:21 at
- 00:13:22 passing an argument with around so for
- 00:13:24 example if you were to have IDs on our
- 00:13:26 contacts and we would want to look up a
- 00:13:29 specific contact with a specific ID then
- 00:13:32 we could use a route where we pass this
- 00:13:36 ID and we'll create some kind of thing
- 00:13:39 like this in the next video see you
- 00:13:41 there bye