Angular – Refreshing a Route with Parameters

Angular routing is pretty nifty.  Going into how it works is beyond the scope of this post Mike Berryman(and there’s plenty of resources out there doing just that), but suffice it to say if you’re working on an Angular application, you’re using Angular’s routing.

One of the things Angular’s routing does to increase performance is reusing a Component for a route that has already been instantiated.  Say you have a Component, “MyComponent”, tied to a route, “/MyPath”.  “MyComponent” isn’t created until the user actually navigates to the “/MyPath” route.  That makes perfect sense – why instantiate a component that doesn’t need to be used yet?  What’s interesting about this design, though, is how parameters factor into it.  Let’s say you add a parameter to your “/MyPath” route, making the route “/MyPath/:id”.  The first time the user navigates to some version of this route, let’s say “/MyPath/1”, “MyComponent” will be instantiated (with the id parameter set to 1).  Then if, without leaving that route, the user changes only the parameter – for example, there’s a link in the component to go to “/MyPath/2”, “MyComponent” will not be recreated.  In fact, if not handled correctly, to the user nothing will have changed.  It will still look like they’re seeing the “/MyPath/1” version of “MyComponent”. Continue reading “Angular – Refreshing a Route with Parameters”

Angular 2 – Detecting Route Changes

Rick HerrmannI ran into a scenario the other day in an Angular 2 app I am working on where I needed to show the same page/route, but with different data and parameters. Without getting into the specifics of my app, the scenario was analogous to this:

I am viewing a page that shows customer contact details. The route pattern could be something like “/customers/:customerId/contact/:contactId”. On the customer contact detail page, we also show a list of links for other contacts with the same customer.

Continue reading “Angular 2 – Detecting Route Changes”