ScreenObserverService

The ScreenObserverService is an Angular service that observes screen size changes and provides an observable to determine the current screen size. It supports various device types including TC52, Mobile, iPad Mini, Tablets, and Web.

Import the Service

Import the ScreenObserverService into your component:

    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { ScreenObserverService } from './screen-observer.service';

    @Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.scss']
    })
    export class ExampleComponent implements OnInit, OnDestroy {

      screenSize: string;
      isBrowser: boolean;

      constructor(private screenObserverService: ScreenObserverService) {}

      ngOnInit() {
        this.screenObserverService.screenSize$.subscribe(size => {
          this.screenSize = size;
        });

        this.screenObserverService.isBrowser$.subscribe(isBrowser => {
          this.isBrowser = isBrowser;
        });
      }
    }

Service Details

The ScreenObserverService provides the following observables:

screenSize$: Emits the current screen size as a string. Possible values are:

isTC52 for devices with a width of 360px isMobile for devices with a width up to 768px isMini for devices with a width between 769px and 1024px isTablet for devices with a width between 1025px and 1366px isWeb for devices with a width of 1367px and above isBrowser$: Emits a boolean indicating whether the code is running in a browser.

Example

In your component template, you can use the screenSize and isBrowser properties to display or hide content based on the screen size and platform: