Angular does not update after updating variable in component

Question

I use Angular 9 and modify a variable that I use in a template. But unfortunately my template does not get updated. Can anyone explain me what the typical approach is to let Angular know that something in my component changed?

projects: any[] = [];
ngAfterViewInit(): void {
    this.actRoute.params.subscribe((params) => {
        this.electronService.foo.bar(
        .then((x) => {
            var history = x.y();

            history.on("begin", () => {
                this.projects.push('foo');
            });
            history.execute();
        });
    });
}

foo.component.html

<ul>
  <li *ngFor="let project of projects;">{{project}}</li>
</ul>

Jorge Mussato · Accepted Answer · 2020-07-29 01:27:15Z

2

Angular will not detect the changes if you don't change the "in memory" variable. In your case, just pushing the same variable will not trigget the change detection. You should this.projects = this.projects.slice() or something like that to change the memory variable and trigger the change. If that doesn't fit you, there are other things you can use like Injecting ChangeDetector then calling ChangeDetector.detectChanges();

constructor(private cd: ChangeDetectorRef) {}

...
this.projects.push('foo');
this.cd.detectChanges();
...

answered Jul 29, 2020 at 1:27

Jorge Mussato

2,5942 gold badges13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Stephens Over a year ago

I don't know who downvoted your post, but it works! Thank you so much. Is there anything seen to be as a side effect?

Jorge Mussato Over a year ago

The side effect is that the changedetector trigger the change from the view in a whole. So if you have too many inputs or interpolations on your page on the moment, it will cost some performance. Changing in memory variable has no cost at all. Not that I know.

Daniel Stephens Over a year ago

I have an end event as well, so I don't trigger detectChanges for every event. Thanks again!

mwilson · Accepted Answer · 2020-07-29 01:13:18Z

1

You need to use the arrow function. this doesn't have the same meaning as you think it does

ngAfterViewInit(): void {
    let projects = this.projects;
    projects = [];

    this.actRoute.params.subscribe((params) => {
        this.electronService.foo.bar(
          .then((x) => { // arrow function
            const history = x.y(); // use const

            history.on("begin", () => { // arrow function
              projects.push('foo');
            });
            history.execute();
          });
        });
    }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

answered Jul 29, 2020 at 1:13

mwilson

13.1k10 gold badges65 silver badges103 bronze badges

4 Comments

Daniel Stephens Over a year ago

Thank you for the clarification! That explains actually a lot now in my code. However, changing the code still doesn't update the Angular view :-/. Is this maybe caused due to the event handlers where Angular doesn't notice any changes?

mwilson Over a year ago

Could be something in your electronService. Make sure you're using arrow functions there as well

Daniel Stephens Over a year ago

Thanks! I verified that it gets properly executed. If I "manually" refresh the "page" the entries are visible. It seems to me the change is done outside Angulars zone, but don't know how I can make Angular aware of that change

mwilson Over a year ago

import ChangeDetectorRef and then run ChangeDetectorRef.detectChanges() after your update. But, I would recommend debugging that further to figure out the actual problem rather than implement the "workaround". Sounds like your problem revolved around the lifecycle hook or scope.

Visibly0467 · Accepted Answer · 2024-06-19 13:57:44Z

1

You must assign the new value to the variable you want to see changed (project) otherwise Angular will not notice the change because the value of your variable is of type object.

The answer is this: this.projects = this.projects.concat(['foo'])

Instead of: this.projects.push('foo') (which is "wrong" in Angular)

answered Jun 19, 2024 at 13:57

Visibly0467

6411 bronze badges

Collectives™ on Stack Overflow

Angular does not update after updating variable in component

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related