Detect Responsive Screen Sizes in Angular

Jecelyn Yeen
Jun 13 · 1 min read

Most of the time, we use CSS media queries to handle responsive, screen size changes to layout our content differently. However, there are times where CSS media queries alone isn’t sufficient for that. We need to handle the responsiveness in our code.

In this article, I would like to share about how to detect responsive breakpoints in Angular, with a twist — we don’t maintaining responsive breakpoint sizes in your Typescript code (because responsive breakpoints are already defined in CSS).

We will use Angular with Bootstrap in this example, but it works for any CSS frameworks and classes.

Full article is available in Scotch as usual.

Jecelyn Yeen

Written by

Coder. Diver. Speak English, Mandarin, Javascript, C# and more.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade