Coding

Angular – “routerLink” vs “href” and Losing State

  • 00:00:01 welcome to this video why is my angular
  • 00:00:05 app losing its state if I reload the
  • 00:00:08 page or if I switch to different pages
  • 00:00:10 inside my app now this is a question we
  • 00:00:13 get sometimes from you and in this video
  • 00:00:15 we'll have a look at the reason why this
  • 00:00:17 is actually happening
  • 00:00:21 for that I prepared a little example app
  • 00:00:24 the app is pretty simple I must say
  • 00:00:26 because we simply have these two
  • 00:00:29 navigation bars so this one right here
  • 00:00:31 and this one right there as you can see
  • 00:00:33 for this navigation bar we will use a
  • 00:00:36 hyper reference so a default HTML
  • 00:00:39 functionality and for the second
  • 00:00:41 navigation bar we will use router links
  • 00:00:43 so we will use the angular router in the
  • 00:00:45 end we have three different pages in our
  • 00:00:49 apps or home products and about the same
  • 00:00:51 for both of these and we have the page
  • 00:00:53 content down here the page content of
  • 00:00:56 course should change depending on what
  • 00:00:58 we select right here so now we have home
  • 00:00:59 if we select products they should be
  • 00:01:01 products and so on down there we have an
  • 00:01:04 input field where we can enter some data
  • 00:01:06 and the data is also displayed right
  • 00:01:08 here below our input field now at the
  • 00:01:11 moment none of these links is working
  • 00:01:12 because I didn't implement any of these
  • 00:01:14 linking or routing functions so far so
  • 00:01:17 let's go to the code and start with the
  • 00:01:19 hyper reference here before we do that a
  • 00:01:22 quick look at the code also as you can
  • 00:01:24 see we will work in the app component
  • 00:01:26 HTML file here we can see the code
  • 00:01:29 nothing special
  • 00:01:30 important I already added the router
  • 00:01:32 outlet down here and as you can imagine
  • 00:01:34 in our app module I also implemented our
  • 00:01:38 imports for the routes and the router
  • 00:01:40 module up here
  • 00:01:41 I had a D constant we need for our
  • 00:01:43 different paths and down here I also got
  • 00:01:46 your router module import and up here
  • 00:01:48 you can see our components we have so
  • 00:01:51 the about component for example looks
  • 00:01:52 like this
  • 00:01:53 nothing fancy same thing is true for
  • 00:01:55 home and products and we also got the
  • 00:01:57 input component for our input field but
  • 00:02:00 let's focus onto our losing state issue
  • 00:02:04 that we have because we can now say that
  • 00:02:07 we simply use a hyper reference right
  • 00:02:09 here this means we just add the hyper
  • 00:02:12 reference here and say this should
  • 00:02:14 direct us to slash because basically
  • 00:02:17 this will lead us back to our current
  • 00:02:19 our starting our home page then we could
  • 00:02:22 add right here a hyper reference
  • 00:02:24 directing us to slash products so our
  • 00:02:27 products page and then we could have a
  • 00:02:30 hyper reference which could direct us to
  • 00:02:33 slash about
  • 00:02:35 like that maybe I should also add the
  • 00:02:38 slash right here so with that if I go
  • 00:02:40 back to the app and as we can see it
  • 00:02:42 reloads already the entire app if I now
  • 00:02:45 click on two products you can see that
  • 00:02:47 the page content now says we are on the
  • 00:02:50 products page so this component
  • 00:02:52 basically was loaded and we can also go
  • 00:02:55 to about right here like that and here
  • 00:02:58 we are at the on the about page and if
  • 00:03:00 we go back to home we are back on the
  • 00:03:02 home page you can also see this up here
  • 00:03:03 in the URL we have the logos 4200 page
  • 00:03:06 right here if I go to products we have
  • 00:03:08 slash products so this is working
  • 00:03:11 basically but there are some problems
  • 00:03:13 with this approach the first problem
  • 00:03:16 becomes evident if you look at this
  • 00:03:17 angular symbol up here because if I now
  • 00:03:20 select about for example can you see it
  • 00:03:23 the page is reloading because whenever
  • 00:03:26 we use and hyper reference then
  • 00:03:29 navigating the different page means that
  • 00:03:31 our entire app is reloaded so the app
  • 00:03:34 basically loses its entire state this
  • 00:03:37 becomes even more evident if I go down
  • 00:03:39 right here into our input field and add
  • 00:03:41 something like Hello and if I now go
  • 00:03:43 back to the home page for example well
  • 00:03:46 what can you see
  • 00:03:47 we can see that the page again reloaded
  • 00:03:50 and it lost its state because the input
  • 00:03:53 we added to our input field right here
  • 00:03:54 is gone the page basically looks the
  • 00:03:57 same way it would look if we would visit
  • 00:03:59 the website for the first time and
  • 00:04:01 that's of course what you normally don't
  • 00:04:02 want in your angular app because the
  • 00:04:05 angular app should be a single page
  • 00:04:06 application with this mobile like
  • 00:04:08 feeling so if I switch to products right
  • 00:04:11 here I don't let me have this reload
  • 00:04:12 symbol down there up there I don't want
  • 00:04:14 the page to reload and of course I also
  • 00:04:17 don't want my state to be lost all the
  • 00:04:18 time now for this reason we do not use
  • 00:04:22 the hyper reference in our angular apps
  • 00:04:24 but we use the router link here because
  • 00:04:28 with router link we can prevent this
  • 00:04:30 default behavior of the page being
  • 00:04:32 reloaded and we can simply navigate
  • 00:04:34 smoothly between the different pages
  • 00:04:36 that we have without that's important
  • 00:04:38 without losing the state of our app now
  • 00:04:41 let's implement the router link now and
  • 00:04:43 let's then see what the difference look
  • 00:04:45 like for that we just go back and
  • 00:04:48 I'll go down here to our second lift
  • 00:04:50 this one right here which contains the
  • 00:04:52 using a router link paragraph so let's
  • 00:04:55 add router link right here and the links
  • 00:05:00 are exactly the same so nothing to
  • 00:05:01 change about here so we can add this
  • 00:05:03 link right here then let me quickly copy
  • 00:05:07 that maybe here and right there so this
  • 00:05:12 one should go to slash products oops and
  • 00:05:14 this one should go to slash about like
  • 00:05:19 that saving this and going back to the
  • 00:05:21 app will now allow us to use both so
  • 00:05:24 still the hyper reference is working
  • 00:05:26 it's a bit slow right here by the way in
  • 00:05:28 my case because it's really hot here in
  • 00:05:31 Munich and my macbook also feels kind of
  • 00:05:33 a bit too hot so sorry for that but as
  • 00:05:36 you can see the hyper reference is still
  • 00:05:38 working if I click on two products we
  • 00:05:40 can still navigate with that again with
  • 00:05:42 our beautiful loading spinner up here
  • 00:05:44 but if I now click on to you about right
  • 00:05:46 here in our using router link section
  • 00:05:48 like that then you can see that the page
  • 00:05:51 content instantly changes products home
  • 00:05:54 can you see it we don't have any kind of
  • 00:05:57 loading spinner we can quickly navigate
  • 00:05:59 between the different pages on our
  • 00:06:01 website without any reloading and
  • 00:06:03 without losing the state I can prove
  • 00:06:07 this to you if I enter hello once again
  • 00:06:09 right here and if I now click on to you
  • 00:06:12 products can you see it the page content
  • 00:06:15 changes but our state down here doesn't
  • 00:06:19 get lost and that's a really cool
  • 00:06:21 feature of this router linker of the
  • 00:06:24 angular router in the end and now you
  • 00:06:26 might ask yourself how is this actually
  • 00:06:28 working well we can have a closer look
  • 00:06:30 at that if we first prevent the default
  • 00:06:33 behavior of our hyper reference appear
  • 00:06:35 for that we can simply go back to the
  • 00:06:37 code and here we can now add our click
  • 00:06:41 listener which we name let's say on
  • 00:06:45 click don't forget to add the dollar
  • 00:06:49 sign right here like this and now we can
  • 00:06:53 copy this two times for our products and
  • 00:06:57 for our
  • 00:07:00 about Paige and in the app component we
  • 00:07:04 can also quickly add it right here so
  • 00:07:07 it's on click that and now we can
  • 00:07:14 prevent the default behavior like that
  • 00:07:18 so if we now go back to our page we can
  • 00:07:21 see that if I click on two products or
  • 00:07:23 about right here nothing is happening
  • 00:07:26 because we prevent that default behavior
  • 00:07:28 and actually that's exactly what our
  • 00:07:31 router link or the angular router is
  • 00:07:33 doing right here because if we quickly
  • 00:07:35 inspect one of the links right here it's
  • 00:07:38 kind of slow again because as I said the
  • 00:07:41 MacBook is close to its limit apparently
  • 00:07:44 when it's a little bit hotter outside or
  • 00:07:46 inside this room but nevertheless let's
  • 00:07:48 inspect products right here and maybe
  • 00:07:50 select the elements tab out there so as
  • 00:07:54 you can see we are now here in our
  • 00:07:55 products link and in this link we also
  • 00:07:58 have a hyper reference so basically the
  • 00:08:01 behavior or the general link idea would
  • 00:08:04 be the same as for the hyper reference
  • 00:08:06 but angular prevents this default
  • 00:08:08 behavior and applies its own logic to it
  • 00:08:11 now what is the own logic well as we
  • 00:08:13 defined right here for our router link
  • 00:08:15 down here that it should navigate to
  • 00:08:17 slash products then in our app module
  • 00:08:20 right here we can see that angular or
  • 00:08:24 the angular router will then simply say
  • 00:08:26 ok I want to navigate you products
  • 00:08:29 therefore I should load the products
  • 00:08:31 component right here same thing would be
  • 00:08:33 true for about or for the actual home
  • 00:08:35 page and in our HTML file with the
  • 00:08:39 router outlet down here we simply tell
  • 00:08:42 our website or we tell angular where
  • 00:08:45 this new component should be loaded and
  • 00:08:48 this is it actually so the next time you
  • 00:08:51 work on your angular app and your state
  • 00:08:53 gets lost if you reload the page or if
  • 00:08:55 you navigate to different pages inside
  • 00:08:58 your app then think about the angular
  • 00:09:00 router and how you can use router link
  • 00:09:03 to make sure such a loss is not
  • 00:09:05 happening to you so thanks a lot for
  • 00:09:07 watching and I hope to see you in the
  • 00:09:09 next videos bye