Trigger Function When Component is Resized in Angular

As an Angular developer, you may often come across the need to trigger a function when a component is resized. This can be useful in various scenarios, such as dynamically adjusting the layout or updating data based on the new dimensions of the component.
In this blog post, we will explore two different solutions to achieve this functionality in Angular.

Solution 1: Using the ResizeObserver API

The ResizeObserver API provides a way to listen for changes to the size of an element. It is supported in most modern browsers, including Chrome, Firefox, and Safari.
Here’s how you can use the ResizeObserver API to trigger a function when a component is resized:


import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-resizable-component',
  templateUrl: './resizable-component.component.html',
  styleUrls: ['./resizable-component.component.css']
})
export class ResizableComponent implements OnInit {
  @ViewChild('resizableElement') resizableElement: ElementRef;

  ngOnInit() {
    const resizeObserver = new ResizeObserver(entries => {
      entries.forEach(entry => {
        // Call your function here
        this.onComponentResize(entry.contentRect.width, entry.contentRect.height);
      });
    });

    resizeObserver.observe(this.resizableElement.nativeElement);
  }

  onComponentResize(width: number, height: number) {
    // Your function logic here
  }
}

In the above code snippet, we define a ViewChild decorator to get a reference to the element we want to observe for resizing. We then create a new instance of the ResizeObserver class and attach it to the element using the observe method. Inside the observer’s callback function, we call the onComponentResize function and pass the new width and height of the component.

Solution 2: Using the HostListener decorator

If you prefer a more Angular-centric approach, you can use the HostListener decorator to listen for the window resize event and trigger a function accordingly.
Here’s how you can implement this solution:


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

@Component({
  selector: 'app-resizable-component',
  templateUrl: './resizable-component.component.html',
  styleUrls: ['./resizable-component.component.css']
})
export class ResizableComponent {
  @HostListener('window:resize', ['$event'])
  onWindowResize(event: Event) {
    // Call your function here
    this.onComponentResize(window.innerWidth, window.innerHeight);
  }

  onComponentResize(width: number, height: number) {
    // Your function logic here
  }
}

In the above code snippet, we use the HostListener decorator to listen for the window resize event. When the event is triggered, the onWindowResize function is called, and we pass the new window dimensions to the onComponentResize function.
Both solutions allow you to trigger a function when a component is resized in Angular. Choose the one that best fits your needs and preferences.

Trigger Function When Component is Resized in Angular