How To Detect Window width in Angular

Sometimes, you might need to perform the tasks depending on the particular window size, it could be anything for instance adding a class, adding styling, or any function call. here below blog useful.

Add below lines in app.component.html

<section>
    <h4>Detect Width Of Window</h4>
    <p>Window Width: {{ width }}</p>
    <p>Mobile: {{ isMobile }}</p>
    <p>Other Device: {{ !isMobile }}</p>
</section>

Add below lines in app.component.ts

import { Component } from '@angular/core';
import { Injectable } from '@angular/core';

function _window(): any {
  return window;
}

@Injectable()
export class WindowRef {
  get nativeWindow(): any {
    return _window();
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    '(window:resize)': 'onWindowResize($event)',
  },
})
export class AppComponent {
  windowSize: any;
  isMobile: boolean = false;
  width: number = window.innerWidth;
  height: number = window.innerWidth;
  mobileWidth: number = 760;

  ngOnInit(): void {
    this.isMobile = this.width < this.mobileWidth;
  }

  onWindowResize(event:any) {
    this.width = event.target.innerWidth;
    this.height = event.target.innerHeight;
    this.isMobile = this.width < this.mobileWidth;
  }
}

Now, run the application using npm start :