Coding

Angular 2 Tutorial (2016) – Routing with Parameters

  • 00:00:03 welcome back in the last video we we set
  • 00:00:07 up our new contact route here to work
  • 00:00:10 now let's say we want to add an option
  • 00:00:13 when we select a contact here that we
  • 00:00:16 are able to then have that we have a
  • 00:00:19 button here which allows us to say like
  • 00:00:22 something create contact from contact so
  • 00:00:25 that we would have let's say the last
  • 00:00:27 name already felt in here so we're going
  • 00:00:30 to do this in this video to start off
  • 00:00:35 this I will go to my contact component
  • 00:00:38 here and below all these input fields
  • 00:00:42 here I'll add a button which says create
  • 00:00:51 new contact from this contact something
  • 00:00:58 like this and when I click this button I
  • 00:01:03 want yeah I basically want that did a
  • 00:01:08 new contact already has let's say the
  • 00:01:10 last name the same last name now this
  • 00:01:13 partner shouldn't be displayed always
  • 00:01:15 because when we load up our app and no
  • 00:01:17 contact will select that I don't want
  • 00:01:19 this to work
  • 00:01:23 we're more specific this goes for a
  • 00:01:26 whole block here right it there's no
  • 00:01:28 need to display it if no contact to
  • 00:01:30 select it so let me go to my contact
  • 00:01:32 list component here and I will make a
  • 00:01:35 change here I will set the selected
  • 00:01:37 component to know so that we have no
  • 00:01:39 component selected with no contact
  • 00:01:41 selected by default now the app is
  • 00:01:43 broken and I don't see the list anymore
  • 00:01:45 this is because here I'm passing
  • 00:01:47 selected contact to my contact component
  • 00:01:50 but it is null and that froze the error
  • 00:01:53 because in my contact component here I'm
  • 00:01:56 trying to access fields of that contact
  • 00:01:59 which is as a set now non-existent so to
  • 00:02:03 fix this I'll add an ng-if directive
  • 00:02:05 here to only show this contact
  • 00:02:08 information or this contact component
  • 00:02:10 here if selected contact is not now
  • 00:02:16 now let me save this and now we got this
  • 00:02:18 list only when I click an item here we
  • 00:02:20 got this this is this info area or this
  • 00:02:24 component pop-up here so now that we get
  • 00:02:27 this I want as I said to be able to
  • 00:02:29 create a new contact from this contact
  • 00:02:35 now I'll show you two ways to set up
  • 00:02:38 this road the first one is we copy this
  • 00:02:41 route here and add new contact last name
  • 00:02:47 this will pass a last name parameter to
  • 00:02:52 this route and I will call it new
  • 00:02:55 contact from contact but a long name but
  • 00:02:59 is fine
  • 00:03:02 now back to my contact component here
  • 00:03:06 I'll have a click event which will fire
  • 00:03:15 the method on create new so let me add
  • 00:03:22 that method here on create new and I
  • 00:03:28 don't need to pass anything here because
  • 00:03:29 what I will do I will fire the route in
  • 00:03:32 this component here and I will pass the
  • 00:03:36 last name which is already stored in
  • 00:03:37 this publicly available contact variable
  • 00:03:42 so to actually be able to do this
  • 00:03:45 routing again we'll add a constructor
  • 00:03:46 here like in the last video I will need
  • 00:03:48 to inject the router private router
  • 00:03:54 router router as always make sure you
  • 00:04:01 are importing it and for the same reason
  • 00:04:05 as in the last video I don't need to add
  • 00:04:08 the providers element or the providers
  • 00:04:13 configuration here cause we're getting
  • 00:04:16 this dependency injection from the root
  • 00:04:18 component of the app component scene now
  • 00:04:22 here in my create new function I can
  • 00:04:26 then call the router navigate method
  • 00:04:29 pass an array as an argument and I will
  • 00:04:33 have the name of my route new contact
  • 00:04:36 from contact very handy little name as
  • 00:04:40 the name and then I will pass additional
  • 00:04:44 information which is a JavaScript object
  • 00:04:47 and here I'll pass the parameters this
  • 00:04:50 route takes now in this case I'll pass
  • 00:04:56 my let's have a look
  • 00:04:58 last name parameter here so we will have
  • 00:05:01 last name equals or gets the value of
  • 00:05:07 our contact last name and obviously here
  • 00:05:13 we have this contact and we should tell
  • 00:05:21 wrap this this is of type contact let's
  • 00:05:26 save this click this create new contact
  • 00:05:29 so this does work we're not seeing the
  • 00:05:31 last thing here this is a reason because
  • 00:05:33 when we get here well okay yeah this
  • 00:05:37 route is executed and as you can see in
  • 00:05:39 the URL we're setting the last name as
  • 00:05:41 an argument or as a parameter of passing
  • 00:05:45 but we're not fetching this parameter
  • 00:05:46 anywhere here in this component so let's
  • 00:05:50 do this in order to fetch this router
  • 00:05:54 parameter I do have to inject some
  • 00:05:58 something here
  • 00:05:58 I will inject another router of specific
  • 00:06:03 object the route params so I will bind
  • 00:06:08 it to my private property route parents
  • 00:06:11 and it will be an object of type route
  • 00:06:14 params
  • 00:06:15 can again use this out of the box
  • 00:06:17 without specifying anything else because
  • 00:06:20 the router providers were injected in
  • 00:06:23 our bootstrap method so I get my route
  • 00:06:26 parents here and now to fetch them I
  • 00:06:30 think a good place would again be the
  • 00:06:32 one in it
  • 00:06:33 lifecycle hood of our component so when
  • 00:06:36 our component is initiated that's a good
  • 00:06:39 place to fetch our route params
  • 00:06:43 parameters so I'll implement the on init
  • 00:06:49 protocol for interface as it was called
  • 00:06:52 here implement methods the energy on
  • 00:06:55 init method will be implemented and here
  • 00:06:59 all I will do is bind this last name I
  • 00:07:05 get as a parameter to my variable or my
  • 00:07:10 property which I will have to create
  • 00:07:11 here so we'll create my public property
  • 00:07:18 last name by default
  • 00:07:22 I'll give this an empty value empty
  • 00:07:27 string so then I can say this last name
  • 00:07:31 equals this route params and now here
  • 00:07:35 I'll execute the get method and specify
  • 00:07:40 the name of the parent which is also
  • 00:07:42 last name but in quotation marks then
  • 00:07:45 save this now let me click this contact
  • 00:07:50 and click create new contact from this
  • 00:07:52 contact and well it's still working but
  • 00:07:55 we're still not seeing it here obviously
  • 00:07:58 because we're not setting it here so
  • 00:08:02 here I'll set the value to the last name
  • 00:08:07 property and let's try it again
  • 00:08:10 well now we see last name here that it's
  • 00:08:12 not what we wanted West is not working
  • 00:08:15 while this is not working because value
  • 00:08:17 is a standard HTML attribute for the
  • 00:08:20 input field and we're basically just
  • 00:08:22 setting a string so in order for this to
  • 00:08:25 work
  • 00:08:26 I'll use my string interpolation syntax
  • 00:08:29 I got here with Kohli braces and now I
  • 00:08:33 save this and now we get back here click
  • 00:08:37 this click this and I now see that I
  • 00:08:42 seem to have an object here and not just
  • 00:08:44 a string and the problem is that I'm
  • 00:08:48 using last name and last name so I have
  • 00:08:51 put this local variable last name and
  • 00:08:52 now this is available here and so I'm
  • 00:08:55 binding to this
  • 00:08:56 instead of this so to change this I'll
  • 00:09:00 just say past last name to make that
  • 00:09:06 easy sure we have no naming duplication
  • 00:09:12 going on here now let's get back again
  • 00:09:15 click this new contact and now we get
  • 00:09:17 the name here so that's the first method
  • 00:09:20 and the second one is really not that
  • 00:09:23 different I'll just use this route
  • 00:09:27 instead of this route even though I
  • 00:09:29 don't specify any parameters here by
  • 00:09:33 basically just saying okay I still again
  • 00:09:38 I got this last name param here and in
  • 00:09:40 my contact component I'm just executing
  • 00:09:43 the new contact route and the same was
  • 00:09:46 the rest will stay the same and now
  • 00:09:49 let's see what happens if I do this it
  • 00:09:52 still works because angular will
  • 00:09:55 automatically attach this additional
  • 00:09:59 parameters here with the question mark
  • 00:10:01 at the end of our out which allows us to
  • 00:10:04 dynamically add optional parameters we
  • 00:10:08 because we can access the route in this
  • 00:10:10 way that's still possible or be passing
  • 00:10:14 on parameter which is then just attached
  • 00:10:16 at the end here so that enables us to
  • 00:10:19 get rid of this extra route here with
  • 00:10:22 this long name and just use the default
  • 00:10:25 route with the option to pass in
  • 00:10:27 parameter but we don't have to so that's
  • 00:10:32 how we can pass parameters to routes and
  • 00:10:35 how we can handle them in the component
  • 00:10:36 which gets the parameters and whether
  • 00:10:39 out leads to now what we have still open
  • 00:10:42 is some form validation to do with our
  • 00:10:45 create new contact field here or our in
  • 00:10:50 the contact form here and well some
  • 00:10:53 additional things about routing because
  • 00:10:54 maybe we want to prevent the user from
  • 00:10:57 being able to leave this page for the
  • 00:11:00 back button if he has unsafe changes so
  • 00:11:03 that are things amongst errors like
  • 00:11:05 accessing a server using pipes what our
  • 00:11:09 pipes