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'; /** * Constructor */ constructor(private _fuseMediaWatcherService: FuseMediaWatcherService) { // 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'; /** * Constructor */ constructor(private _fuseMediaWatcherService: FuseMediaWatcherService) { // 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'; }); }