Whether for Search Engine Optimization or your passion project, it’s important for your webpages to be responsive. After all, more than 70% of the online population loves to read content on their smart devices. This means that your page needs to render perfectly on these small, hand-held devices. Of course, you have bootstrap and other libraries to help you with this. But what if you want to take things into your own hands?

In this post, you will get a step by step guide on how to create a responsive web page in Angular 2.0.

Let’s get started.

A Quick Walk through

Create a new angular project, or you can use an existing one!

Create an enum, for holding all possible window sizes to be considered.

Create a separate folder, SizeDetector, to carry the files required for building a responsive site

Create a sizeDetector.ts file, which is responsible for identifying any changes to the size of the window

Create a sizeService.ts file, which is an injectable service. This service observes any changes made to the size (using a Subject), and notifies the view that subscribes it!

Create a view that subscribes the service, and observes for changes. When a change happens, you can define how the view needs to be modified. The latter is totally up to you!

Doesn’t this sound simple?

#subscribe #injectable #observables #responsive-website-design #angular2