how to wait for a finished method to execute the next in angular?

Question

Well, I’m doing an Angular course, I’m trying to understand the concept of Observables and Promisses, but I’m a little confused, I’m using Firebase to create a simple application, where I use email authentication and password and to save the other user data I have to use the id of this authenticated user and register in the Database. Having done so I have to use the method of my service that creates this user and then use the method that saves the data. Following this order I have to do the method of SignUp(email,senha) be executed before the method setUserData(User).

> Metodos

SetUserData(user) {
    const itemsRef = this.db.object(`usu/${user.uid}`);
    return itemsRef.set(user);
  }



SignUp(email, password) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((result) => {
        this.SendVerificationMail();
        window.alert("BEM VINDO");
      }).catch((error) => {
        window.alert(error.message)
      })
  }

Note: The methods are called in the component where I do the two-way data Binding with the form using an onsubmit method'

Answer 1

JS is asynchronous, you can work with callback for this, the first method takes the second method as argument, after the processing of the first, it terminates by calling the second:

function segundo(login) {
  console.log('segundo');
}

function primeiro(callback) {
  console.log('primeiro');
  callback();
}

primeiro(segundo);

Also scrolls do this with observable, with Promise:

• https://developer.mozilla.org/en-US/docs/Glossario/Callback_function
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://rxjs-dev.firebaseapp.com/guide/observable

Answer 2

What you can do is use the subscribe, inside it you make the calls. subscribe will wait for the function to be executed and then execute what is inside it. Here is a link from an easy-to-understand tutorial:

• https://medium.com/tableless/entendendo-rxjs-observable-com-angular-6f607a9a6a00