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.
BreakpointObserver CDK component contains
BreakPoints object contains various predefined screen types as below:
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
Web screen types are pretty explanatory.
The HTML template subscribe the
cardLayout.layoutItem observable via
async pipe and update the
The complete source code can be found in this GitHub repository.