Angular 5 HTML not updating after variable change

Question

I'm having a strange issue where my HTML page isn't updating when the angular component variable changes. After pressing a button I do a network load and start playing audio like so:

onPreviewPressed(media: Media): void {
    if (this.playing) {
        this.playing = false;
        this.source.stop();
    }

    this.loading = true;

    this.service.downloadAudio(this.gender, this.style, this.ageRange, media).subscribe(abuf => {
        this.context.decodeAudioData(abuf, buffer => {
            this.source.buffer = buffer;
            this.playing = true;
            console.info(`Playing is ${this.playing}`);
            this.source.start(0);
        }, y => {
            console.info('Error: ' + y);
        });
        this.loading = false;
    }, () => {
        this.loading = false;
    });
}

And then on my HTML I have this snippet:

Playing is {{ playing }}
<button [hidden]="!playing" style="width: 44px; height: 44px" (click)="onStopPressed()">
    <img src="/assets/stop.png" alt="Stop">
</button>

When I click the button the audio properly downloads and starts playing, and in the console I see it say Playing is true but the HTML continues to say false, and doesn't show the button.

I thought it might be an issue of this not really being the component but the window variable, but if that were the case then the audio would really be able to play either as the source variable is part of the component.

using hidden is actually not recommended blog.angularjs.org/2016/04/… — Ravikumar Rajendran
– Ravikumar Rajendran, Commented Oct 20, 2018 at 16:13

Bonfix Ngetich · Accepted Answer · 2021-12-13 18:32:17Z

17

I had a similar problem and fixed it by:

#Inject ChangeDetectorRef to the constructor
 constructor(private changeDetectorRef: ChangeDetectorRef)

ngOnInit(): void {
  # get data or listen to changes
  # then 
  this.changeDetectorRef.detectChanges();
}

Remember to import it by:

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

answered Dec 13, 2021 at 18:32

Bonfix Ngetich

1,26713 silver badges17 bronze badges

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

1 Comment

danilo Over a year ago

Thanks! It can happen when the variable is updated inside an event listener. It'll be outside the Angular change detector.

Nekvin · Accepted Answer · 2021-12-01 09:51:24Z

Possible cause

It looks like the playing is not being capture as a part of change detector mechanism in Angular.

Fix : You have a couple of choices

The first is to use setters and getters for the playing variable

Functions always play a vital role as part of change detector so it ensures that your change in variable reflects.

In *.ts

get playingValue(){
    return this.playing;
}

set playingValue(playing){
    this.playing = playing;
}

In *.html

Playing is {{ playingValue }}

The second option is to use setTimeout(...)

this.service.downloadAudio(this.gender, this.style, this.ageRange, media).subscribe(abuf => {
        this.context.decodeAudioData(abuf, buffer => {
            this.source.buffer = buffer;

            setTimeout(()=>this.playing = true);  //setTimeout
            
            console.info(`Playing is ${this.playing}`);
            this.source.start(0);
        }, y => {
            console.info('Error: ' + y);
        });
        this.loading = false;
    }, () => {
        this.loading = false;
    });

Joe Belladonna · Accepted Answer · 2018-10-20 16:14:08Z

0

Have you tried this:

<button *ngIf="playing" style="width: 44px; height: 44px" (click)="onStopPressed()">
    <img src="/assets/stop.png" alt="Stop">
</button>

answered Oct 20, 2018 at 16:14

Joe Belladonna

1,35914 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular 5 HTML not updating after variable change

3 Answers 3

1 Comment

Possible cause

Fix : You have a couple of choices

In *.ts

In *.html

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Possible cause

Fix : You have a couple of choices

In *.ts

In *.html

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related