Angular 2 Tutorial (2016) – Inserting Data with Services + More Routing

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

You may also like