Reactive Responsive Design in Practice: Part 2
In my last article, I introduced the concept of Reactive Responsive Design (a term created by me), what it is, how it works, and why it’s important. Now let’s take a look at how we can use it to build a responsive UI. To start we need a service.
The purpose of the service is to provide unified breakpoints for screen sizes. This will unify the breakpoints an app cares about with code rather than convention. There are 3 things that will need to happen in the service.
- Define the sizes we want tracked
- Provide an observable with a standardized interface
- Define specific states we care about (like mobile or tablet)
rxrs provides a service (called the ScreenSizeService) with reasonable defaults for this. In Angular you will want to use the rxrs-ng library so everything plays nicely with Angular.
To get set up, first run:
npm install rxrs rxrs-ng
Then import the ScreenSizeService into your component.
