Thenable executes first

this.addToArray(snap).then(result => {

        alert("then")

        observer.next(this.data)

        observer.complete()

})

async addToArray(snap) {

  await snap.forEach(element => {

    this.db.database.ref(`/users/${element.key}/contact`).on("value", snapshot => {

     this.data.push(snapshot.val())

     alert("foreach")

    })
    
  })

return true;

}

the Expected Sequence is:

foreach
foreach
then

I am getting this instead:

then
foreach
foreach

What is wrong??