How to use the Angular CDK Viewport Ruler for responsive apps

Sometimes, in an Angular app we need to trigger something when the viewport gets resized. Take an example of an app where we can open a responsive menu panel that lays on top of everything else. We may want to automatically close the menu when the browser is resized. How can we do this? Well, maybe you have some ideas, but with the Angular CDK, this is pretty easy. We can use the Viewport Ruler. It’s a utility that deals with several aspects of, you guessed it, the viewport. In this video I’m going to show you how to use it and the features it provides. Alright, let’s get to it.

------------------------------------------------------------------------------

🔗 Demo Link:
https://stackblitz.com/edit/stackblitz-starters-kvsh1c?file=src%2Fmain.ts

------------------------------------------------------------------------------

📖 Chapters:
0:00 - Introduction
1:43 - Setting up the the CDK ViewportRuler
2:15 - Subscribing to the CDK ViewportRuler change event
3:00 - Using NgZone to run the CDK ViewportRuler change event within Angular’s change detection
3:49 - Using the CDK ViewportRuler to get the viewport rect object
4:16 - Using the CDK ViewportRuler to get the current viewport scroll position
4:39 - Using the CDK ViewportRuler to get the viewport size

------------------------------------------------------------------------------

#angular #cdk #responsive

Видео How to use the Angular CDK Viewport Ruler for responsive apps канала Brian Treese