Documentation
Fuse Components
Services

## Media Watcher

FuseMediaWatcherService is a singleton service to watch media changes. It automatically registers the breakpoints from TailwindCSS configuration, so you can use the service without needing to configure it first.

## Module

import { FuseMediaWatcherModule } from '@fuse/services/media-watcher';

## Methods

To watch changes on registered breakpoints, you can use the onMediaChange$ getter:

import { FuseMediaWatcherService } from '@fuse/services/config'; private _fuseMediaWatcherService = inject(FuseMediaWatcherService); /** * Constructor */ constructor() { // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ .pipe(takeUntil(this._unsubscribeAll)) .subscribe(({matchingAliases}) => { // Check if the breakpoint is 'md' and up this.isScreenSmall = matchingAliases.includes('md'); }); }

You can also listen for custom media queries using `onMediaQueryChange$(query: string)` method:

import { FuseMediaWatcherService } from '@fuse/services/config'; private _fuseMediaWatcherService = inject(FuseMediaWatcherService); /** * Constructor */ constructor() { // Subscribe to media changes this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)') .pipe(takeUntil(this._unsubscribeAll)) .subscribe((state) => { // Calculate the drawer mode this.drawerMode = state.matches ? 'side' : 'over'; }); }