npm install @wamlib/ngx-screen-size-reporter

Initialization

export const appConfig: ApplicationConfig = {
 providers: [
   provideScreenSizeReporter()
 ]
};

Initialization (With optional custom breakpoints)

export const appConfig: ApplicationConfig = {
 providers: [
   provideScreenSizeReporter({ small: '(max-width: 600px)' })
 ]
};

Usage

import { ScreenSizeReporter } from '@wamlib/ngx-screen-size-reporter';

@Component({...})
export class AppComponent {
  protected screenSizeReporter = inject(ScreenSizeReporter);
}

@if (screenSizeReporter.isSmallScreen()) {
<app-mobile-nav />
} @else {
<app-desktop-sidebar />
}