One issue I am encountering is that changes in the instance variable in my component class are not automatically reflected in my template file unless I explicitly call ref.detectChanges
The method signInWithGoogle in my auth service is called from the component to sign in with Google
signInWithGoogle(): Observable<User> {
const observable = Observable.fromPromise(
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
).concatMap(result => {
const url = environment.apiEndpoint + '/rest-auth/social/google/';
const request = { access_token: result.credential.accessToken };
return this.login(url, request);
});
return observable;
}
private login(url, request): Observable<User> {
return this.http
.post<User>(
url,
request
)
.concatMap((user: User) => {
localStorage.setItem(
environment.constants.STORAGE_USER,
JSON.stringify(user)
);
return Observable.of(user);
});
}
Below is a relevant code snippet from my component:
export class LoginComponent implements OnInit {
errorMessage: string;
request = new LoginRequest();
googleSignIn($event) {
$event.preventDefault();
this.authService.signInWithGoogle().subscribe(
(user: User) => {
console.log('logged in');
},
err => {
this.errorMessage = 'Problem while signing in with Google';
}
);
}
}
This is how I am using the errorMessage variable from the component file in my template
<ngb-alert *ngIf="errorMessage" [dismissible]="false" type="danger">
{{errorMessage}}
</ngb-alert>