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.