DEV Community

loading...
Cover image for ResizeObserver in Angular

ResizeObserver in Angular

Salim Chemes
Software Engineer.
・2 min read

In this post we will review how to implement ResizeObserver in Angular applications

What is ResizeObserver?
Based on the documentation

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

So, our goal is know when our component is resized.

How can implement ResizeObserver in Angular?
We will use ng-web-apis/resize-observer

The documentation is pretty clear, so let's start with an example to see how this library works.

First thing to do is to add @ng-web-apis/common as dependency

npm i @ng-web-apis/common
Enter fullscreen mode Exit fullscreen mode

Second is to add

npm i @ng-web-apis/resize-observer
Enter fullscreen mode Exit fullscreen mode

and finally

npm install --save @types/resize-observer-browser
Enter fullscreen mode Exit fullscreen mode

Now, let's start adding changes into our app.
Adding ResizeObserverModule into app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResizeObserverModule } from '@ng-web-apis/resize-observer';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    ResizeObserverModule // adding library module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Adding a section in app.component.html, to display resize changes.
Note we have waResizeBox="content-box", which is the default value. Possible values are content-box (the default), border-box, and device-pixel-content-box. Check the docs for more details.
waResizeObserver will allow us to react when the component is resized

<section>
    <h1 waResizeBox="content-box" (waResizeObserver)="onResize($event)">
        <div>
        width: {{this.width}}
        </div>
        <div>
        height: {{this.height}}
        </div>
        <span>
        domRectReadOnly: {{this.domRectReadOnly | json}}
        </span>
    </h1>
</section>
Enter fullscreen mode Exit fullscreen mode

Creating onResize method in app.component.ts to assign resize event properties and display them in our template

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

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

export class AppComponent {
  title = 'resize-observer';
  width: number = 0;
  height: number = 0;
  domRectReadOnly: DOMRectReadOnly | undefined;

  onResize(entry: ResizeObserverEntry[]) {
    this.width = entry[0].contentRect.width
    this.height = entry[0].contentRect.height;
    this.domRectReadOnly = entry[0].contentRect;
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it. This is what happens when we resize the browser
Alt Text

Conclusions

  • We have reviewed what ResizeObserver is and how to implement it in Angular
  • ResizeObserver is one of the API's for Angular, take a look into this to find more

References

Discussion (0)