Input property not being updated when using callback function

Question

I need to update a property in a child component when a push notification is received from firebase. Firebase is configured correctly and I have the property configured as an input properly. The value is updated in the child successfully when I manually trigger the change using a button. However, when the value is changed using a callback the value will be updated but the child is not notified of the change.

export class AppComponent implements OnInit {
    private orders_updated:boolean = false;

    ngOnInit(): void {
        //firebase.init() removed for space
        firebase.addOnMessageReceivedCallback((data) => {
            this.interpret_message(data);
        });
    }

    private clicked() {
        this.orders_updated = !this.orders_updated;
        console.log(this.orders_updated)
    }

    private interpret_message(message:any) {
        if (message.body == "A new order was submitted") {
            this.clicked();
        }
    }
}

export class TransactionComponent implements OnInit {
    private _update:boolean;

    @Input() set update(value: boolean){
        this._update = value;
        console.log("Value updated")
    }
}

When the clicked function is called manually I receive an update that the value in TransactionComponent was updated. However, when clicked is called as the result of a callback I do not receive "Value updated" message. I believe that by using an arrow function I am not running into a scope issue.

have you tried using ngOnChanges, as OnChanges hook is used to check when input changes — Barkha
– Barkha, Commented Aug 12, 2019 at 16:23

Ian MacDonald · Accepted Answer · 2019-08-12 16:27:46Z

0

You are not guaranteed to be operating in the same NgZone when responding through an async channel like firebase.

export class AppComponent implements OnInit {
    private orders_updated:boolean = false;

    constructor(private zone: NgZone) {}

    ngOnInit(): void {
        //firebase.init() removed for space
        firebase.addOnMessageReceivedCallback((data) => {
            this.interpret_message(data);
        });
    }

    private clicked() {
        this.zone.run(() => {
          this.orders_updated = !this.orders_updated;
          console.log(this.orders_updated)
        });
    }

    private interpret_message(message:any) {
        if (message.body == "A new order was submitted") {
            this.clicked();
        }
    }
}

answered Aug 12, 2019 at 16:27

Ian MacDonald

14.1k2 gold badges33 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Input property not being updated when using callback function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related