CODEWITHSUNDEEP
javascriptangularangular5
user9236321
user9236321

Reputation:

Angular change detection mechanism fires too often

In one of my controllers I have :

 @HostListener('window:resize')
onResize() {
this.currentWindowWidth = window.innerWidth;
}

and based on the window Width, I render different views. One of which needs to do some calculations. But since the change detection mechanism fires too often, this really slows down the app and there's a delay.

How are such situations managed best?

Upvotes: 1

Views: 421

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657338

That's not related to Angular change detection, it's the resize event that happens that often

Also @HostListener() is currently not a good option to list to events that are emitted that frequently https://github.com/angular/angular/issues/13248

You can use

constructor(private zone: NgZone) {
  this.zone.runOutsideAngular(() => {
    Observable.fromEvent(window, 'resize')
        .debounceTime(100)
        .subscribe((event) => {
          this.zone.run(() => {
            this.currentWindowWidth = window.innerWidth;
          });
        });
  });
}

Upvotes: 2

Related Questions