When working with Angular, regardless of whether Angular Material is part of your setup, there's a straightforward approach to responsive layouts that removes the need to author media queries yourself.
Indeed, you can eliminate media queries entirely for many scenarios.
Writing your own media queries isn't inherently problematic, but in practice, they tend to become disorganized, unwieldy, and difficult to sustain over time.
Whenever possible, it's more efficient to steer clear of them or at least keep them to a minimum—and Angular provides the means to do exactly that.
So, what is the process for making Angular components or an entire application responsive?
Implementing responsive design with Angular involves a few key steps:
- use Angular's BreakpointObserver to determine the current device's screen dimensions
- toggle component member variables to selectively display or conceal elements based on screen size
- attach responsive CSS classes, such as
is-phone-portrait, based on the detected size - utilize those classes to achieve responsive styling without resorting to media queries
Continue reading for the complete guide on implementing this strategy.
Table Of Contents
Here's an overview of what we'll explore in this article:
- The BreakpointObserver Service
- Using layout-related flags to show or hide responsive elements
- Writing CSS that only applies to certain screen sizes (without media queries)
- Summary
Let's dive straight into the details for making your Angular application responsive.
The BreakpointObserver Service
The cornerstone of building responsive applications without writing our own media queries is the Angular CDK BreakpointObserver service.
It offers an observable-based API that keeps its subscribers informed about the current screen dimensions and any shifts in orientation when a device is flipped between landscape and portrait.
The service also triggers new emissions when you mimic various screen sizes via developer tools, which is particularly handy for testing different layouts during development.
It's important to note that this service belongs to the Angular Component Development Kit (CDK) rather than Angular Material directly, although it's fully compatible with both.
Since the CDK is modular, leveraging this service doesn't necessitate importing a significant amount of extra code into your application.
What's the internal mechanism of this service?
The BreakpointObserver service ships with a pre-defined set of CSS breakpoints, each corresponding to a distinct screen size or device form factor.
Each of these breakpoints aligns with a meticulously crafted CSS media query designed to accurately represent a wide array of devices.
While this is a thorough list, I often find that TabletPortrait, TabletLandscape, HandsetPortrait and HandsetLandscape suffice for most projects.
To see the exact CSS media query for each breakpoint, you can simply log them to the console, as these breakpoints are just strings containing the query text.
Checking the console will reveal something like this.
The benefit is that there's no need to engage with these media queries at all.
The upkeep of those CSS media queries isn't a concern for you:
Web (min-width: 840px) and (orientation: portrait), (min-width: 1280px) and (orientation: landscape)
WebLandscape (min-width: 1280px) and (orientation: landscape)
WebPortrait (min-width: 840px) and (orientation: portrait)
Tablet (min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), (min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)
TabletPortrait (min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)
TabletLandscape (min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)
Handset (max-width: 599.98px) and (orientation: portrait), (max-width: 959.98px) and (orientation: landscape)
HandsetLandscape (max-width: 959.98px) and (orientation: landscape)
HandsetPortrait (max-width: 599.98px) and (orientation: portrait)
XSmall (max-width: 599.98px)
Small (min-width: 600px) and (max-width: 959.98px)
Medium (min-width: 960px) and (max-width: 1279.98px)
Large (min-width: 1280px) and (max-width: 1919.98px)
XLarge (min-width: 1920px)
For instance, TabletLandscape and TabletPortrait map directly to a standard-size iPad screen.
On the other hand, the Handset breakpoints are tailored to mobile phones, including iPhones and Android devices.
How does the BreakpointObserver service work?
Through its observable-based API, the BreakpointObserver lets you know when the current device matches any of these breakpoints.
As an example, this code snippet shows how you'd subscribe to receive notifications when the screen aligns with the HandsetLandscape breakpoint:
Launching the app on a typical desktop will produce no console output, which is expected behavior.
You can, however, emulate mobile devices using the Device toolbar found in Chrome Dev Tools:
The highlighted element activates the device toolbar, which lets you choose a specific screen size.
In this instance, we configured the screen to resemble an iPhone held in landscape orientation.
As you can see in the console, the breakpoint was triggered as anticipated this time.
You'll notice a fresh value being emitted whenever you toggle the dev tools or adjust screen dimensions via the device toolbar.
Subscribing to multiple breakpoints simultaneously is also a possibility with the BreakpointObserver:
Observe that the BreakpointObserver service emits a map of all currently active breakpoints, allowing you to check each one independently.
This service provides the fundamental building blocks needed to make your Angular components adaptive.
What are the practical applications? There are a couple of common approaches.
Using layout-related flags to show or hide responsive elements
A simple tactic is to adjust some component member variables in response to the breakpoints that are currently being matched.
Consider a component designed to hide its side menu when on a phone or a tablet in portrait mode.
You could adapt the interface by altering a boolean variable, say hideSideMenu, based on the active breakpoints:
Remember to reset the hideSideMenu value when a new batch of matching breakpoints arrives, restoring the default in case none of the breakpoints are matched anymore.
Then, in the template, we can leverage this hideSideMenu flag to conditionally show or hide the side menu with ngIf:
Besides booleans, you might also set variables that dictate a grid's column count, an element's height, or anything else your layout requires.
What if we need to tweak the component's styling to fit the device?
Writing CSS that only applies to certain screen sizes (without media queries)
At times, controlling component behavior with plain CSS is still preferable.
For example, you might want to strip away margins and padding on mobile devices due to limited screen real estate.
This is achievable without inserting media queries in your components by introducing a few boolean member variables specifically for layout purposes.
Let's say we want our component to adopt particular styles only when the screen is in phone portrait orientation, which is often the most constrained format.
The first step would be to add a boolean property, isPhonePortrait, to our component:
Using that flag, we can then apply a distinctive is-phone-portrait class to a root container element that wraps the component's template, using ngClass:
With this class in place, incorporating responsive styles into your component's CSS is no longer a task for media queries:
Summary
As demonstrated, the Angular CDK's BreakpointObserver service greatly simplifies crafting responsive Angular components without authoring a single media query.
Once more, there's no fundamental objection to putting media queries directly in your component's CSS; I just believe this method offers better readability and manageability in the long run.
Take, for example, finding all phone-portrait-specific styles in your application. You can scan for is-phone-portrait instead of hunting for a media query, where styles might be missed due to inconsistent formatting, spacing, or indentation.
Moreover, writing each component's responsive CSS this way makes it easier to read and comprehend, ensuring the codebase stays maintainable as it evolves.
We trust this post was insightful. For a deep dive into Angular Material, including responsive design, consider the Angular Material In Depth course.
If you have any questions or feedback, feel free to drop a comment below, and we'll do our best to respond.
To keep up with upcoming Angular posts, don't forget to subscribe to our newsletter:
And if you're new to Angular, the Angular for Beginners Course might be a great starting point:
