Post
Ask Question

Auto Detect Responsive Screen Sizes Using Angular and Bootstrap

Introduction

This is an example of Angular screen size detection. Steps to get responsive screen sizes when the user changes the window size or resizes the screen size in Angular.Steps 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.

Note. Before going through this session, please visit my previous article on Angular applications as mentioned below.

Step 1. Update TypeScript template

Import HostListener API from the ‘@angular/core’ package, define variables get screen width and getScreenHeight, and use the HostListener to bind window to resize event to get the screen size and width on window resize. Add the code in the src/app/app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
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;
  }
  
}

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.

set screen height and screen width on the initial page load.

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

Then get responsive screen sizes when the user changes the window size or resizes the screen size.

@HostListener('window:resize', ['$event'])
onWindowResize() {
  this.getScreenWidth = window.innerWidth;
  this.getScreenHeight = window.innerHeight;
}

Step 2. Update HTML template

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. Add the code in the src/app/app.component.html file.

<div class="card bg-danger text-white">
  <div class="card-body text-center">
    Steps To Get Responsive Screen Sizes When The User Changes The Window Size Or Resize The Screen Size
  </div>
</div>

<div class="toast show" style="position: fixed; top: 50%; left: 50%; width: 30em; height: 14em; margin-top: -9em; margin-left: -15em; border: 1px solid #ccc; background-color: #f3f3f3; color: red; font-weight: 900; font-size: larger;">
  <div class="toast-header">
    Window width & Window height in Angular
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    <p>Window width: <strong>{{ getScreenWidth }}</strong></p>
    <p>Window height: <strong>{{ getScreenHeight }}</strong></p>
  </div>
</div>

Bind the properties as get screen width and getScreenHeight as shown here

<div class="toast-body">
  <p>Window width: <strong>{{ getScreenWidth }}</strong></p>
  <p>Window height: <strong>{{ getScreenHeight }}</strong></p>
</div>

Step 3. Add Bootstrap to make the page responsive

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title Service Example</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Output

Output image

How it performs is shown below.

Summary

In this write-up, we have learned the details below.

  • Detect the width and height of the screen in Angular using the HostListener decorator
  • Show responsive screen sizes when the user changes the window size or resizes the screen size in Angular

Thank You & Stay Tuned For More


Similar Articles