Tips for properly waiting for an AngularFire2 subscription to complete before executing the subsequent lines of code within Angular2

Question

Tips for properly waiting for an AngularFire2 subscription to complete before executing the subsequent lines of code within Angular2

Having an issue with my Angular2 Type Script code. The goal is to access Questions from a Firebase Database by subscribing to a FirebaseListObserver:

this.af.list('/questions').subscribe( val => {
     this.questions = val
     console.log(this.questions) // working fine
})
console.log(this.questions) // showing as undefined

Struggling to figure out how to wait for the subscription to receive a value before executing a function that relies on this.questions.

Experimented with async/await, but it didn't pause for the subscription to return a value.

Tried subscribing inside a promise as well, still ending up with an empty array.

angular typescript firebase firebase-realtime-database async-await

Answer 1

Answer №1

To incorporate the function, you have two options: execute it within the subscribe callback or convert questions into a setter/getter:

private _questions = [];

set questions(questions) {
  this._questions = questions;

  // Respond to changes in questions here
}

get questions() {
 return this._questions;
}

This setup functions similarly to a watcher in older versions of angular. Within the set function, examine if questions contains a value and respond accordingly by invoking the necessary function.

Answer 2

To incorporate the function, you have two options: execute it within the subscribe callback or convert questions into a setter/getter:

private _questions = [];

set questions(questions) {
  this._questions = questions;

  // Respond to changes in questions here
}

get questions() {
 return this._questions;
}

This setup functions similarly to a watcher in older versions of angular. Within the set function, examine if questions contains a value and respond accordingly by invoking the necessary function.

Tips for properly waiting for an AngularFire2 subscription to complete before executing the subsequent lines of code within Angular2

Answer №1

Similar questions

Validate if the translation file exists in ngx-translate

ngx-capture : Issue with capturing the entire page

Sharing variables between parent and child components in Angular 2 Dart using router

Using Typescript: Defining a property's type based on the value of another property in the same object

Updating the node startup file with Visual Studio 2015 using NodeJS/Typescript

Using React, PIXI, and Zustand can sometimes lead to stale state issues when handling mouse events

Leverage the power of Bootstrap 4 without incorporating its pre-built components

What is the best way to send parameters to an async validator when working with reactive controls in Angular

Different ways to contrast rows within ag-grid

Is there a way to asynchronously update state in a component without directly triggering an action?

What is the reason behind CORS errors being triggered by the inclusion of an HTTP Interceptor?

Changing the default route in Angular 2 based on conditions

Using href with IconButtonProps is not supported

What is the step-by-step guide for implementing an access limiter on an interface

Tips for adding a border to a table cell without disrupting the overall structure of the table

Error message: Unable to modify headers after they have already been sent-NodeJS, MongoDB, and Mongoose

When using *ngFor to loop through components, the ng2-file-upload library's new FileUpload() function may not always create a new instance for each component

Angular material chips showcase a row of five chips

Welcome to Ng-Zorro, your destination for all things innovative and cutting

Apologies, but it seems there was an issue with the installation of the "@angular/compiler-cli" package