Angular 13 Detect Width and Height of Screen Tutorial

Recently, I was assigned a task to build a responsive layout; however, I was not allowed to take the help of CSS media query; on the other hand, I was to use the *ngIf directive as the window size changes.

So, I decided to go through the Angular window size detection with the help of the HostListener API.

Sometimes, you might need to perform the dev tasks depending on the specific screen size, it could be anything for instance adding a class, adding styling, or call any function.

In Angular, getting a real-time window size on screen size changing is exorbitantly effortless. In this tutorial, we will learn how to detect the width and height of the screen in Angular using the HostListener decorator.

The HostListener is a Decorator used for listening to the DOM, and It provides a handler method to run when that event occurs.

Angular calls the provided handler method when the host element emits the named event and updates the associated element with the result.

So, let us begin and understand how to get the window height and width in Angular 12 application.

How to Get Width and Height of Screen on Window Resize in Angular

• Step 1: Install Angular CLI
• Step 2: Download Angular Project
• Step 3: Update TypeScript Template
• Step 4: Update HTML Template
• Step 5: Start Angular App

Install Angular CLI

Angular development solely relies on Angular CLI; you make sure you have the required tool installed.

If not, then run the command to install the Angular command-line interface (CLI).

npm install -g @angular/cli

Download Angular Project

In this step, you have to download the angular application using the given below command.

However, you may utterly skip this step if you have installed the app in advance.

ng new ng-demo

Next, step inside the project directory.

cd ng-demo

Update TypeScript Template

Import HostListener API from ‘@angular/core’ package, define variables get screen width and getScreenHeight, use the HostListener to bind window to resize event to get the screen size and width on window resize.

Update the code in src/app/app.component.ts file.

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


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

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

  onWindowResize() {
    this.getScreenWidth = window.innerWidth;
    this.getScreenHeight = window.innerHeight;
  }
  
}

Update HTML Template

In this step, you have to open the angular HTML template file and define the variables using the double curly braces to print the screen or window size on the browser.

Please update the code in src/app/app.component.html file.

<div class="container text-center mt-5">

  <p>Window width: <strong>{{ getScreenWidth }}</strong></p>
  <p>Window height: <strong>{{ getScreenHeight }}</strong></p>

</div>

Start Angular App

All the necessary steps have been done, now you have to type the given command and hit enter to run the angular app server.

ng serve

Now, open the browser, type the given url and hit enter and view the screen size on window resize in angular.

http://localhost:4200

Conclusion

In this Angular screen size detect example, we have gone through significant steps and learned how to get responsive screen sizes when the user changes the window size or resize the screen size.