Building responsive UI with Angular Material — BreakpointObserver

Building responsive web application is one of the unsaid requirement nowadays. There are different ways one can build responsive UI, ranging from plain old CSS media queries to various framework and libraries like Angular Material.

In this story we will see how to build react to changing viewport on the device as an Observable and update UI accordingly. We will use BreakpointObserver component from Angular material CDK library. We will render list of card components differently based on target device type.

The BreakpointObserver CDK component contains BreakPoints object contains various predefined screen types as below:

Once the BreakpointObserver service is injected into the component, we can subscribe to desired screen type and update our UI as a response.

In this example, we are observing Handset, XSmall and Small screen type to display UI targeting mobile and small screen handheld devices. The Tablet and Web screen types are pretty explanatory.

The HTML template subscribe the cardLayout.layoutItem observable via async pipe and update the colspan and rowspan properties.

The complete source code can be found in this GitHub repository.

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan