The value of the local variable remained unchanged despite the occurrence of global events (window.onresize)

Question

The value of the local variable remained unchanged despite the occurrence of global events (window.onresize)

The value of the local variable remained unchanged despite global events (window.onresize) occurring.

export class TestComponent implements OnInit {
    a: number = 0;
    b: number = 0;
    ngOnInit() {
        window.onresize = () => {
            this.a = 10;
            this.b = 10;
        };
    }
}

https://i.sstatic.net/7IOEw.png

typescript angular atscript

Answer 1

Answer №1

Connect to global events by utilizing host binding, as outlined in the API documentation. You can find more information about this in the DirectiveMetadata page:

@Component({
  selector: 'my-app',
  template: `<p>Resize window and observe console log.
    <p>{{a}} {{b}}`
})
export class AppComponent {
  @HostListener('window:resize') onResize() {
    this.a++;
    this.b++;
    console.log(this.a, this.b, event)
  }
}

plunker

Your original code fails because you overwrote the onresize handler (which Angular had also modified) with your own function. As a result, Angular loses the ability to perform change detection after the event handler completes. By using host binding, you ensure that the Angular monkey-patch remains intact, preventing the disabling of change detection so that your view updates seamlessly after the resize event.

Answer 2

Connect to global events by utilizing host binding, as outlined in the API documentation. You can find more information about this in the DirectiveMetadata page:

@Component({
  selector: 'my-app',
  template: `<p>Resize window and observe console log.
    <p>{{a}} {{b}}`
})
export class AppComponent {
  @HostListener('window:resize') onResize() {
    this.a++;
    this.b++;
    console.log(this.a, this.b, event)
  }
}

plunker

Your original code fails because you overwrote the onresize handler (which Angular had also modified) with your own function. As a result, Angular loses the ability to perform change detection after the event handler completes. By using host binding, you ensure that the Angular monkey-patch remains intact, preventing the disabling of change detection so that your view updates seamlessly after the resize event.

Answer 3

Answer №2

The value of the local variable remained unchanged.

Upon review of the screenshot, it is evident that this.b = 10, thereby indicating a change in the variable's value.

https://i.sstatic.net/jK8EN.png

The screenshot also displays a: number = 0. This simply shows the value of a at the last breakpoint. It is also noticeable that this.a is 10

Answer 4

The value of the local variable remained unchanged.

Upon review of the screenshot, it is evident that this.b = 10, thereby indicating a change in the variable's value.

https://i.sstatic.net/jK8EN.png

The screenshot also displays a: number = 0. This simply shows the value of a at the last breakpoint. It is also noticeable that this.a is 10

Answer 5

Answer №3

After encountering a similar issue, I managed to resolve it by ensuring that the update code ran within the Angular Zone. I found helpful documentation that guided me through the process, which is available at https://angular.io/docs/js/latest/api/core/index/DirectiveMetadata-class.html (up to date as of 10/8/16).

You can implement a solution similar to the following:

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

constructor(private _ngZone: NgZone) {
}

ngOnInit() {
    window.onresize = () => {
        this._ngZone.run(() => {
            this.a = 10;
            this.b = 10;
        }
    };
}

Although simpler than the solution provided by Mark Rajcok in another discussion, it's worth noting that Angular 2 is continuously evolving. Therefore, my approach may be one of the improvements that have been implemented, as the link to DirectiveMetadata may no longer be relevant.

Answer 6

After encountering a similar issue, I managed to resolve it by ensuring that the update code ran within the Angular Zone. I found helpful documentation that guided me through the process, which is available at https://angular.io/docs/js/latest/api/core/index/DirectiveMetadata-class.html (up to date as of 10/8/16).

You can implement a solution similar to the following:

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

constructor(private _ngZone: NgZone) {
}

ngOnInit() {
    window.onresize = () => {
        this._ngZone.run(() => {
            this.a = 10;
            this.b = 10;
        }
    };
}

Although simpler than the solution provided by Mark Rajcok in another discussion, it's worth noting that Angular 2 is continuously evolving. Therefore, my approach may be one of the improvements that have been implemented, as the link to DirectiveMetadata may no longer be relevant.

The value of the local variable remained unchanged despite the occurrence of global events (window.onresize)

Answer №1

Answer №2

Answer №3

Similar questions

Error encountered: Parsing error in Typescript eslint - The use of the keyword 'import' is restricted

Make sure to name your Typescript component selector correctly, as it should not

Incorporating CASL with the latest version of Angular, version

Issue encountered when attempting to display JSON index on individual result page

Challenge encountered with implementing Next-Auth's authorize function in TypeScript

Operators within an observable that perform actions after a specific duration has elapsed

Is there an array containing unique DateTime strings?

Exploring the Potential of Jest Testing for Angular 6 Services

tslint issues detected within a line of code in a function

What do you think about gulp-typescript and the latest @types typings for TypeScript?

When the page is first loaded, the select options dropdown using NgFor and NgValue does not display the initial object from the list

Obtaining the ViewRef of the current component in Angular 4

The properties are absent in Angular Service - Observable

How is it possible for the igx-expansion-panel to close when there is a nested angular accordion present?

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

Is it possible to dynamically load the child path of the Foo Component from a separate component using the current route data?

Dynamic Angular select options with ngFor causing cascading changes in subsequent selects

Sending a style prop to a React component

Validation of time input using Angular Material within a ReactiveForm

The synergy between ternary operators and Vue filters