@alshoja/break-point-observer

Angular-breakpoint-observer

Let you observe your current screen size dynamicaly as observable in any of the components using the service

• Can be used instead of media query in Angular- 9+

• Demo in Stack Blitz

Getting started

Install via npm

npm install @alshoja/break-point-observer

Import the module

import { BreakPointObserverModule } from '@alshoja/break-point-observer';
............................................................................
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BreakPointObserverModule.forRoot(
      [
        { gridName: 'xl', width: '(min-width: 1200px)' },
        { gridName: 'lg', width: '(min-width: 992px)' },
        { gridName: 'md', width: '(min-width: 768px)' },
        { gridName: 'sm', width: '(min-width: 576px)' },
        { gridName: 'xs', width: '(min-width: 0px)' },
      ]
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Subscribe to the screen size

import { BreakPointObserverService } from '@alshoja/break-point-observer';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'breaktest';
  constructor(private observerService: BreakPointObserverService) {

  }
  ngOnInit() {
    this.observerService.size.subscribe(screensize => {
      console.log('screensize', screensize);
    });
  }
}

Running the demo app

ng serve