[html] Detecting real time window size changes in Angular 4

I have been trying to build a responsive nav-bar and do not wish to use a media query, so I intend to use *ngIF with the window size as a criterion. But I have been facing a problem as I am unable to find any method or documentation on Angular 4 window size detection. I have also tried the JavaScript method, but it is not supported.

I have also tried the following:

constructor(platform: Platform) {
    platform.ready().then((readySource) => {
        console.log('Width: ' + platform.width());
        console.log('Height: ' + platform.height());

...which was used in ionic.

And screen.availHeight, but still no success.

This question is related to html angular dom-events

The answer is

To get it on init

public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;

If you wanna keep it updated on resize:

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;

If you want to react on certain breakpoints (e.g. do something if width is less than 768px), you can also use BreakpointObserver:

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

{ ... }

const isSmallScreen = breakpointObserver.isMatched('(max-width: 599px)');

or even listen to changes to that breakpoint:

  '(max-width: 768px)'
    ]).subscribe(result => {
      if (result.matches) {
      } else {
        // if necessary:

If you'd like you components to remain easily testable you should wrap the global window object in an Angular Service:

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

export class WindowService {

  get windowRef() {
    return window;


You can then inject it like any other service:

    private windowService: WindowService
) { }

And consume...

  ngOnInit() {
      const width= this.windowService.windowRef.innerWidth;

The documentation for Platform width() and height(), it's stated that these methods use window.innerWidth and window.innerHeight respectively. But using the methods are preferred since the dimensions are cached values, which reduces the chance of multiple and expensive DOM reads.

import { Platform } from 'ionic-angular';

private width:number;
private height:number;

constructor(private platform: Platform){
    platform.ready().then(() => {
        this.width = platform.width();
        this.height = platform.height();

This is an example of service which I use.

You can get the screen width by subscribing to screenWidth$, or via screenWidth$.value.

The same is for mediaBreakpoint$ ( or mediaBreakpoint$.value)

import {
} from '@angular/core';
import {
} from 'rxjs';
import {
} from 'rxjs/operators';

export class ResponsiveService implements OnDestroy {
  private _unsubscriber$: Subject<any> = new Subject();
  public screenWidth$: BehaviorSubject<number> = new BehaviorSubject(null);
  public mediaBreakpoint$: BehaviorSubject<string> = new BehaviorSubject(null);

  constructor() {

  init() {
    fromEvent(window, 'resize')
      ).subscribe((evt: any) => {

  ngOnDestroy() {

  private _setScreenWidth(width: number): void {

  private _setMediaBreakpoint(width: number): void {
    if (width < 576) {
    } else if (width >= 576 && width < 768) {
    } else if (width >= 768 && width < 992) {
    } else if (width >= 992 && width < 1200) {
    } else if (width >= 1200 && width < 1600) {
    } else {


Hope this helps someone

The answer is very simple. write the below code

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
// Import this, and write at the top of your .ts file
import { HostListener } from "@angular/core";

 selector: "app-login",
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']

export class LoginComponent implements OnInit, OnDestroy {
// Declare height and width variables

@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
      this.scrHeight = window.innerHeight;
      this.scrWidth = window.innerWidth;
      console.log(this.scrHeight, this.scrWidth);

// Constructor
constructor() {

@HostListener("window:resize", [])
public onResize() {

public ngAfterViewInit() {

private detectScreenSize() {
    const height = window.innerHeight;
    const width = window.innerWidth;

you can use this https://github.com/ManuCutillas/ng2-responsive Hope it helps :-)

You may use the typescript getter method for this scenario. Like this

public get width() {
  return window.innerWidth;

And use that in template like this:

<section [ngClass]="{ 'desktop-view': width >= 768, 'mobile-view': width < 768 

You won't need any event handler to check for resizing/ of window, this method will check for size every time automatically.

Questions with html tag:

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment Angular 6: saving data to local storage Vue.js get selected option on @change Bootstrap 4 multiselect dropdown How to add bootstrap in angular 6 project? Angular 5 Button Submit On Enter Key Press Angular 5, HTML, boolean on checkbox is checked How to render string with html tags in Angular 4+? bootstrap 4 file input doesn't show the file name How can I execute a python script from an html button? Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Failed to load resource: the server responded with a status of 404 (Not Found) css Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? CSS Grid Layout not working in IE11 even with prefixes How to prevent page from reloading after form submit - JQuery Centering in CSS Grid Detecting real time window size changes in Angular 4 Angular 4 img src is not found (change) vs (ngModelChange) in angular Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 How to style a clicked button in CSS How do I change the font color in an html table? Redirecting to a page after submitting form in HTML Load json from local file with http.get() in angular 2 display: flex not working on Internet Explorer Scroll to element on click in Angular 4 How to extract svg as file from web page force css grid container to fill full screen of device How does the "position: sticky;" property work? HTML5 Video autoplay on iPhone Disable button in angular with two conditions? CSS hide scroll bar, but have element scrollable CSS grid wrapping How to load image (and other assets) in Angular an project? Flask - Calling python function on button OnClick event How can I make Bootstrap 4 columns all the same height? Wrapping a react-router Link in an html button

Questions with angular tag:

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7 How to set value to form control in Reactive Forms in Angular Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740] WARNING in budgets, maximum exceeded for initial ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 was found instead Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found How to set width of mat-table column in angular? How to reload current page? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How to convert string to boolean in typescript Angular 4 Angular: How to download a file from HttpClient? Confirm password validation in Angular 6 Angular 6: saving data to local storage How to use mouseover and mouseout in Angular 6 get current date with 'yyyy-MM-dd' format in Angular 4 Sort Array of object by object field in Angular 6 Setting values of input fields with Angular 6 Select default option value from typescript angular 6 Angular 6: How to set response type as text while making http call Set default option in mat-select How to do a timer in Angular 5 Can not find module “@angular-devkit/build-angular” Could not find module "@angular-devkit/build-angular" How to remove package using Angular CLI? How to add bootstrap in angular 6 project? Can't bind to 'dataSource' since it isn't a known property of 'table' Angular 6 Material mat-select change method removed How to set environment via `ng serve` in Angular 6 Angular 5 Button Submit On Enter Key Press ERROR Error: StaticInjectorError(AppModule)[UserformService -> HttpClient]: Set focus on <input> element How to import a new font into a project - Angular 5 Angular - "has no exported member 'Observable'" Uncaught (in promise): Error: StaticInjectorError(AppModule)[options] Property '...' has no initializer and is not definitely assigned in the constructor Angular 5 ngHide ngShow [hidden] not working What could cause an error related to npm not being able to find a file? No contents in my node_modules subfolder. Why is that? Angular - How to apply [ngStyle] conditions How to remove whitespace from a string in typescript? Angular 5 - Copy to clipboard

Questions with dom-events tag:

Detecting real time window size changes in Angular 4 Does Enter key trigger a click event? What are passive event listeners? Stop mouse event propagation React onClick function fires on render How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over iFrame onload JavaScript event addEventListener, "change" and option selection Automatically pass $event with ng-click? JavaScript click event listener on class Change <select>'s option and trigger events with JavaScript How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript? How to know whether refresh button or browser back button is clicked in Firefox Show/hide div if checkbox selected window.location.href doesn't redirect JavaScript: SyntaxError: missing ) after argument list window.onbeforeunload and window.onunload is not working in Firefox, Safari, Opera? Checkbox Check Event Listener Wait 5 seconds before executing next line How to capture Enter key press? Adding an onclick event to a div element jQuery.click() vs onClick HTML input file selection event not firing upon selecting the same file How to fire a change event on a HTMLSelectElement if the new value is the same as the old? adding multiple event listeners to one element How to check whether dynamically attached event listener exists or not? How to set cursor to input box in Javascript? How to display a confirmation dialog when clicking an <a> link? Capture the close event of popup window in JavaScript Get event listeners attached to node using addEventListener How to make HTML element resizable using pure Javascript? Detect if HTML5 Video element is playing Onclick javascript to make browser go back to previous page? Get ID of element that called a function How do you log all events fired by an element in jQuery? Using Chrome, how to find to which events are bound to an element Jquery mouseenter() vs mouseover() Capturing window.onbeforeunload Call a Javascript function every 5 seconds continuously Cannot read property length of undefined html <input type="text" /> onchange event not working How to simulate a mouse click using JavaScript? How to distinguish mouse "click" and "drag" onclick event function in JavaScript document.body.appendChild(i) How to implement a lock in JavaScript With form validation: why onsubmit="return functionname()" instead of onsubmit="functionname()"? How to watch for array changes? removeEventListener on anonymous functions in JavaScript How to trigger checkbox click event even if it's checked through Javascript code?