Angular Firestore Display A Button Depending Of A Returned Boolean Which Checks If An Firestore Document Exist

Requested behaviour: Displaying a button in an Angular view depending on a returned boolean of an Angular Service which checks if a Firestore document exists Current State The Se

Solution 1:

In component typescript you have property which is boolean and you are assigning it to Promise inside the constructor.

Move your code to ngOnInit add async keyword before that and before assigning followState use keyword await

exportclassServiceTestComponentimplementsOnInit {

  followState: boolean;

  constructor(private followService: ProfileFollowService) { }

   // logs [object Promise], should log true or falseasyncngOnInit() {
     console.log('followstate' + this.followState);

     this.followState = awaitthis.followService.callCheckFollow('someID', 'someID');
   }


}

Solution 2:

A bit blind coding, but might this work?

In the service using Rxjs to verify if the object exist, and return an Observable of the result. With snapshot changes so that the value can change dynamicly:

public callCheckFollow(followingID: string, followerID: string): Observable<boolean> {
    return of(this.angularFirestore.collection('users/${followingID}/following').doc(followerID).snapshotChanges().take(1).do(d => d.payload.exists));
}

In the TS Component, just grab the observable from the service.

exportclassServiceTestComponentimplementsOnInit {

  followState: Observable<boolean>;

  constructor(private followService: ProfileFollowService) {
     this.followState = this.followService.callCheckFollow('someID', 'someID');   
   }
}

And then in the html listen async for changes on the follow state.

<div *ngIf="(followState | async)"><p>hello Doc</p></div><div *ngIf="(!followState | async)"><p>No doc</p></div>