Change Angular Label Dynamically with Received Value

Question

I am working on Angular - Node websockets, scenario is when the button is clicked, it will be sending a request to server and get data and update the received data on client-side. but it is not changing as per. code is below.

Label on component HTML

<h2>{{iSpeed}}</h2>

component.ts

    iSpeed: any;
    
    //BUTTONCLICK
    speedTest(){
        //WORKS
        this.iSpeed = "LOADING";
        socket.emit("checkedTrue");
    }
    ngOnInit(): void {
        socket.on('acknowledged', (data: any) =>{
            //LABEL CHANGE
            this.iSpeed = data.internetSpeed;
            alert(this.intSpeed = data.internetSpeed);
        })
    }

Angular Newbie, where I am being dumb?

marek · Accepted Answer · 2022-08-09 07:22:17Z

1

Looks like problem with change detection. You can try this

constructor(private cdr: ChangeDetectorRef) {}

ngOnInit(): void {
    socket.on('acknowledged', (data: any) =>{
        //LABEL CHANGE
        this.iSpeed = data.internetSpeed;
        
        this.cdr.detectChanges();
        alert(this.intSpeed = data.internetSpeed);
    })
}

If you are using onPush change detection strategy, first case works because change detection is called after click, but second one doesn't

answered Aug 9, 2022 at 7:22

marek

543 bronze badges

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

2 Comments

Roshan Zaid Over a year ago

Yea @Marek, it works! Thanks, Actually what does this ChangeDetectorRef do? Kudos!

marek Over a year ago

Calls manually changeDetection, it's not topic for couple of words, you can read more for example here medium.com/ngconf/…

Collectives™ on Stack Overflow

Change Angular Label Dynamically with Received Value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related