Click here to share this article on LinkedIn »

When we take on a new front-end project, the designers provide us with web/mobile view of the website. Sometimes they differ from one another and as programmers, we need to make sure to write re-usable and easy to maintain to code for these situations.

Problem:

How to create a simple system that will allow us to construct components separately for desktop, tablet and mobile without messing up the code base?

Solution:

There are plenty of them. I’m gonna go over my favourite one that I like to use.

Meet the Responsive Service

I usually create a service that is responsible of determining what device or screen size the user is seeing the website on. This can be done in at least a couple of ways.

The famous regex:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

console.log('mobile device detected'

}

2. Width of the screen

var width = window.innerWidth;

if (width <= 768) {

console.log('mobile device detected')

} else if (width > 768 && width <= 992) {

console.log('tablet detected')

} else {

console.log('desktop detected')

}

Which one to use?

The requirements of the project may force you to use both or one of them. The decision is up to you.

A rule of thumb here is that if there are features that the website only offers on mobile devices, such as some specific popups, buttons, telephone links — use the first method. Otherwise, the second method always works.

A sample responsive.service.js looks like this:

The checkWidth() method sets the screenWidth property according to the size of the screen. This property can be used in other services and components if needed. But this property won’t be of use if the user tries to resize their screen on their desktop or rotate their mobile/tablet devices into landscape views. For that, we have created an rxjs Subject called isMobile . This Subject can be subscribed to in any component/service to know if we are looking at a mobile view or not.

If things are not clear right now, that’s okay because I haven’t told you how to use the Angular’s resize method yet. We will look at some code now.

Here’s a sample app.component.html

Here, we use the Angular’s resize method window:resize . Whenever the div with the class app-body is resized, a method called onResize() will fire.

This method is defined in the app.component.ts file:

Here, we first subscribe to the getMobileStatus() method in the responsive.service.ts file. Remember, an Observable is useless if not subscribed to. After you subscribe to it, you call the onResize() method. This is done so that when the user lands on the website initially, you will know what screen size the user is in. Lets say the user tries to resize the browser window after that. onResize() method will be triggered which calls the checkWidth() method in the responsiveService.

If you scroll up and check the service, you will notice a method onMobileChange() being called with an argument true or false depending on the screen size. This method is the key ingredient as it emits out a boolean that can be caught by every subscribed component.

So basically if the user resizes the browser window, the screen size is checked, and a boolean value is emitted. Any component subscribed to the responsiveService.getMobileStatus() method will get to know if the user is looking at a mobile or tablet or desktop view.

In this way, you can really decrease the mess in components. Take this sample.component as an example that uses the *ngIf directive to show different html to the user depending on what screen size he is using

I hope this is understandable and helpful. Cheers!