Angular, callback doesn't change variable

Question

I have the following snippet

This is my main.html

<h2 class="txtcenter po-2text" style="padding-top:30px">
    {{title}}
</h2>

This is my main.ts:

title: string;

ngOnInit() {
    var self = this;
    var ref = firebase.database().ref('schools/' + this.currentUserId());
    ref.orderByChild('title').on('value', function(dataSnapshot) {
        console.log("Title is: " + dataSnapshot.val().title);
        self.title = dataSnapshot.val().title;
    });
}

Even though the callback gets fired with some valid data, the title doesn't update automatically. What am I missing?

Any help is appreciated!

Can you please create a working sample of this? You can try creating a StackBlitz if possible. Also try changing the syntax to fat-arrow function syntax and check if that helps. Try changing your ngOnInit like this: ngOnInit() { const ref = firebase.database().ref('schools/' + this.currentUserId()); ref.orderByChild('title').on('value', dataSnapshot => this.title = dataSnapshot.val().title); } — SiddAjmera
– SiddAjmera, Commented Oct 5, 2018 at 9:15

Anto Antony · Accepted Answer · 2018-10-05 09:20:40Z

7

Angular change detection works based on browser events, since this is a fire base event callback this wont trigger the change detection. So try the following

Import NgZone:

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

Add it to your class constructor

constructor(public zone: NgZone, ...args){}

Run code with zone.run:

ref.orderByChild('title').on('value', (dataSnapshot) => {
        console.log("Title is: " + dataSnapshot.val().title);
        this.zone.run(() => this.title = dataSnapshot.val().title;)
});

answered Oct 5, 2018 at 9:20

Anto Antony

8826 silver badges13 bronze badges

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

1 Comment

Anto Antony Over a year ago

@LuigiCapogrosso :)

Collectives™ on Stack Overflow

Angular, callback doesn't change variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related