Angular 5 - Are callbacks limited in scope?

Question

Let's say you define a variable like below (snackbar). It's accessible by the rest of the Angular class with this, but not in the callbacks of promises. I'm using AngularFire 5.

export class SomeComponent implements OnInit {
    constructor(private snackbar: MatSnackBar, private afs: AngularFirestore) {}    

    //Promise function
    this.afs.doc(path).set({
        ...some code
    }).then(function(docRef){
        this.snackbar.open('Snackbar message', 'OK');  //Sanckbar unreachable
    });

    //Regular function
    this.snackbar.open('Snackbar message', 'OK');  //Sanckbar works fine
}

How would someone reach those variables from inside the then? Or is it just not possible?

Replace `function(docRef)` with `arrow function`. Your `context` is changed — Suren Srapyan, Jan 12 '18 at 08:38

score 2 · Accepted Answer · answered Jan 12 '18 at 08:38

2

That is a JavaScript "feature"

Use

 }).then((docRef) =>{

instead of

 }).then(function(docRef){

See also https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

answered Jan 12 '18 at 08:38

Günter Zöchbauer

623,577
216
2,003
1,567

That works great, thanks. – FiringBlanks Jan 12 '18 at 08:41
@FiringBlanks glad to hear :) – Günter Zöchbauer Jan 12 '18 at 08:41
Isn't it an EcmaScript feature ? – Jan 12 '18 at 08:43
1

@trichetriche I meant `this` not working as most expect with `function () {}` is a JavaScript feature ;-), you're right about `=>` – Günter Zöchbauer Jan 12 '18 at 08:44

Angular 5 - Are callbacks limited in scope?

1 Answers1