Load different components according to device in Angular.

Front-End developer

Different devices loading QuiddKids

It’s not actually a secret. I use the CanActivate interface of Angular. You can already close. 🙂

Oh! You kept reading! Thanks!

So… I have a component that uses angular-maps. When a map marker is clicked, another component with the item details is opened.
The URL is changed to provide deep linking to map items.
This way, users can share a link to the map with a specific item opened.
This item details component receives the data using inputs. So the map container component is the parent component of the item details one.

The problem here (I did not notice it when I built the app) is that in mobile, the item details fills the full screen.
So, when user is navigating to an item details deeplink, they don’t actually need to load the map. But I was doing it.

It’s bad for two reasons:
1- I was wasting user connection data for nothing. User has not actively asked us to show the map, but the item information.
2- If the previous one wasn’t an important enough reason(it is, indeed) for a re-think and refactor, there is another one: When user accesses to the ‘map’ route…
It lead in a flash before item details component was shown. User saw the map without markers and suddenly… The item details component appeared since I loaded ALL the markers prior to ‘open’ the item details component.

So… What I needed is a different behavior for the item details route in desktop and mobile.

As I spoiled at the start… I used the CanActivate interface of Angular. So… No big secret at all.

This is what I had. It was a wrong idea, for mobile devices.

This way, users don’t load a map if they did not request it.

Small clarification
My app is mobile first… I make it for mobile and later I adapt it to Desktop, fixing styles and so on.
In certain places I need to know if I am in Desktop. I use DeviceDetectorService for this purpose.

What I make in the CanActivate implementation is to use DeviceDetectorService to navigate to the map route if I am in Desktop.
I make it behave like this because I assume that in Desktop user has a better internet connection and better device, so they can afford to load the map (what it’s actually required according to the styles I designed).

Small clarification again
While I am writing this I am wondering if there’s a browser API to know if users are connected to a wi-fi network and its speed. This could be a good factor to evaluate what component / route to load, in addition to the simple decision mobile or desktop. I will investigate when possible.

So… A demo of what I built can be checked at http://map.quiddkids.com

1- Load the app with a browser with the device emulator activated and check the networks tab. You’ll see that the Google Maps API is not been called.
2- Turn of the device emulator and reload the app. You’ll see the map loaded with the item details component opened.

I created a repo at GitHub with the implementation of the solution (simplified) without another logic or feature:

I hope it can help or provide you an idea to your needs. I’d actually like to know if there’s a better way to tackle this issue!

Thanks for your attention!

Leave a Reply

Your email address will not be published. Required fields are marked *