Angular πŸ‡ΊπŸ‡¦ - practical notes
1.63K subscribers
1.6K photos
1 file
532 links
Angular - practical notes

This group is for posting practical notes for Angular developers. Mostly all posts are for quick implementation https://t.me/angular_practical_notes (Commenting on posts only in ENG and UA langs here). Welcome!
Download Telegram
🩢 Media query matcher in Angular with RxJS, signals and NgClass

#angular #signals #service #matchMedia

To achieve the desired outcome, I’ve opted for an approach that follows this pattern:

β€” Create a service with a `mediaQuery()` method, which returns an RxJS Observable containing information on whether a specific breakpoint is matched or not.

β€” Create a property inside the component class (in the example we will call it `isMobile`, since we have only one breakpoint) and bind it the the `mediaQuery()` method previously crafted, but also converting the Observable to a signal.

β€” Utilize the `NgClass` directive to dynamically apply a class based on the value of the `isMobile` property.


βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘1