Seeking desired outcome:
How to display a button in an Angular view based on the boolean value returned by an Angular Service that checks for the existence of a Firestore document.
Current Scenario
The Service successfully verifies the presence of the document and updates the global variable within the if/else statement. While I can log the boolean value when calling the function in the service, it is not being returned as expected.
Challenge
Upon invoking the function from the component, it consistently logs [object Promise] and triggers a TS lint error:
Type 'Promise<Boolean>' is not assignable to type 'boolean'.What steps can be taken to address this issue? Is it necessary to convert the promise into a boolean or an Observable?
Service Implementation:
export class ProfileFollowService {
// Global variable meant for update
followState: boolean;
// Verifies document existence and returns a boolean
async checkFollow(followingID: string, followerID: string): Promise<Boolean> {
const followDoc =
this.angularFirestore.collection(`users/${followingID}/following`).doc(followerID).ref;
return followDoc.get().then((doc) => {
if (doc.exists) {
this.followState = true;
} else {
this.followState = false;
}
return this.followState;
});
}
async callCheckFollow(followingID: string, followerID: string) {
const result = await this.checkFollow(followingID, followerID);
console.log(result); //Logs true or false as intended
return result;
}
}Component Class:
export class ServiceTestComponent implements OnInit {
followState: boolean;
constructor(private followService: ProfileFollowService) {
// Raises TS Lint error: Type 'Promise<Boolean>' is not assignable to type 'boolean'.
this.followState = this.followService.callCheckFollow('someID', 'someID');
// Logs [object Promise], instead of true or false
ngOnInit() {console.log('followstate' + this.followState);}
}Component HTML:
<div *ngIf="followState === true">
<p>hello Doc</p>
</div>
<div *ngIf="followState === false">
<p>No doc</p>
</div>