How to control size of an element on resize of window in a component ?

Angular is a popular JavaScript framework for building single-page applications (SPAs). It provides a set of tools and libraries for building rich, interactive web applications using modern web technologies such as HTML, CSS, and TypeScript. One of the key features of Angular is its component-based architecture, which allows you to break your application into smaller, reusable pieces that can be easily shared and managed. Each component has its own template, style, and logic, and can be easily composed with other components to build complex applications. In this article, we will see the step-by-step to create an Angular application that controls the size of an element on resize of the window.

Syntax:

onResize(event: Event) {
    this.width = (event.target as Window).innerWidth;
    this.height = (event.target as Window).innerHeight;
}

Here, the width & height denotes the width & the height of the component.

Approach 1: Using HostListener

• First, create a new Angular project using the Angular CLI. You can do this by running the following command:

ng new my-app

• Then locate the app using the following command:

cd my-app

• Next, create a new component for the resizable element. You can do this by running the following command:

ng g c resizable

• Open the resizable.component.ts file and import the Component and HostListener decorators from the @angular/core module and add the following code:

Javascript

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

@Component({
    selector: 'app-resizable',
    template: `
    <div class="resizable"
          [style.width.px]="width"
          [style.height.px]="height">
        <h1>Geeks For Geeks!</h1>
            How to control size of an element on
            resize of the window in a component?
    </div>`,
    styleUrls: ['./resizable.component.css']
})
export class ResizableComponent {
    width = 400;
    height = 300;

    @HostListener('window:resize', ['$event'])
    onResize(event: Event) {
        this.width = (event.target as Window).innerWidth;
        this.height = (event.target as Window).innerHeight;
    }
}

• Open the resizable.component.css file and add the following code:

CSS

.resizable {
  background-color: gray;
}
h1 {
  color: green;
}

• Open the app.component.html file and add the app-resizable component to the template.

HTML

<app-resizable></app-resizable>

• Run the application using the following command:

ng serve -o

The app will open in a browser window, The size of the div element in the app-resizable component should now change as you resize the window.

Output:

Approach 2: Using HostBinding

• First, create a new Angular project using the Angular CLI. You can do this by running the following command:

ng new my-app

• Then locate the app using the following command:

cd my-app

• Next, create a new component for the resizable element. You can do this by running the following command:

ng g c resizable

• Open the resizable.component.ts file and import the Component, HostBinding, and HostListener decorators from the @angular/core module, and add the following code to the file:

Javascript

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

@Component({
    selector: 'app-resizable',
    template: `
    <div class="resizable">
      <h1>Geeks For Geeks!</h1>
      How to control size of an element
      on resize of the window in a component?
    </div>`,
    styleUrls: ['./resizable.component.css']
})
export class ResizableComponent {
    @HostBinding('style.width.px') width = 100;
    @HostBinding('style.height.px') height = 300;

    @HostListener('window:resize', ['$event'])
    onResize(event: Event) {
        this.width = (event.target as Window).innerWidth;
        this.height = (event.target as Window).innerHeight;
    }
}

• Ope the resizable.component.css file and add the following code:

CSS

.resizable {
  background-color: gray;
}
h1 {
  color: green;
}

• Open the app.component.html file and add the app-resizable component to the template.

HTML

<app-resizable></app-resizable>

• Run the application using the following command:

ng serve -o

The app will open in a browser window, The size of the div element in the app-resizable component should now change as you resize the window.

Output: