Angular 12 Get Window Width and Height on Resize Tutorial

In this quick tutorial, you will learn how to detect screen width and height on window resize an Angular app using the HostListener API.

Responsive layout is user and SEO friendly; more than that; it is device friendly. A web application’s layout adjusts itself based on the size of the device.

If you come from a CSS background, you must be familiar with the media queries; media query allows you to customize the style on specific device sizes.

On the other hand, programmatically, you might need to customize your app on specific screen sizes; that’s where this tutorial comes into play.

Detecting responsive screen sizes in angular is not complicated; apparently, with the help of this simple guide, you will go through some significant steps and look deeply at how to get real-time window size changes in the angular 12 application.

Angular Detect Width and Height of Screen on Window Resize Example

  • Step 1: Set Up Angular CLI
  • Step 2: Create Angular App
  • Step 3: Get Responsive Screen Size
  • Step 4: Display Window Size
  • Step 5: Run Development Server

Set Up Angular CLI

Ensure that you have installed the node runtime environment and npm package manager on your development system.

After that, type and execute the given command to install the Angular CLI.

npm install -g @angular/cli

If Angular CLI is already configured, then skip this step.

Create Angular App

Let us create the new angular app with the help of the provided command.

ng new ng-blog

Get into the project folder:

cd ng-blog

Get Responsive Screen Size

Open the src/app/app.component.ts file, or you may generate the new component however given code will go into the TypeScript template.

import { Component, HostListener } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  public windowWidth: any;
  public windowHeight: any;
  
  ngOnInit() {
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
  }
  
  @HostListener('window:resize', ['$event'])

  resizeWindow() {
    this.windowWidth = window.innerWidth;
    this.windowHeight = window.innerHeight;
  }
  
}

Inside the component class, create a function where you have to define the width and height variables, bind the window to resize the event to HostListener.

Display Window Size

The text interpolation allow us to incorporate dynamic string values into your HTML templates.

To show screen size on the browser, open the src/app/app.component.html and set the variables into the interpolation tags.

<ul>
  <li>Screen width: {{ windowWidth }}</li>
  <li>Screen height: {{ windowHeight }}</li>
</ul>

Run Development Server

Finally, type command on the command prompt and hit enter to start the angular development server:

ng serve

Here is the url on which you can test the app:

http://localhost:4200

Angular Get Window Width and Height on Resize Tutorial

Conclusion

In this tutorial, we have demonstrated how to take the help of the HostListnere function to handle window resize event and detect the screen resizing in angular.