Developing any web app-based project with Angular, in particular, requires you to assume that your user will be browsing your Angular project not only on a typical web browser on a PC but could also be viewed on an iPad or a mobile device.

In some cases, to provide an optimum UI/UX for your users, you might want to hide certain details when the user views your website on a mobile device rather than on a PC.

While Angular has been built to be dynamic out of the box, the problem here is, you might want to customise certain viewing experiences, and the question is how can you tell where the site is being viewed from?

Is it possible to get the screen size or browser size in advance or dynamically, when the web app is being loaded to ensure the optimum UI/UX experience for your users? No matter on which device, or screen they are viewing your Angular web app from?

If you are having this problem too on your Angular-based project, the answer is yes, it is possible to deliver this and I am going to show you how to do this dynamically using Host Listener.

#javascript