I can't seem to identify the issue :(
The concern lies in the fact that isLoadingLogin is consistently set to false, preventing the mat progress bar from being shown.
My implementation of LoginFormComponent appears as follows:
template: `
{{(isLoadingLogin | async) | json }}
<mat-progress-bar *ngIf="(isLoadingLogin | async)" mode="indeterminate" class="progress-bar"></mat-progress-bar>
`,
styleUrls: ['./login-form.component.scss']
})
export class LoginFormComponent implements OnInit, OnDestroy {
isLoadingLogin: Observable<boolean>;
ngOnInit() {
this.isLoadingLogin = this.userService.isLoading;
}
login() {
if (this.form.valid) {
const email = this.form.get('email').value;
const password = this.form.get('password').value;
this.sessionService.login(email, password);
}
}
}
Furthermore, the accompanying services are as follows:
@Injectable({
providedIn: 'root'
})
export class SessionService {
login(email: string, password: string) {
this.authService.login(email, password).subscribe(token => {
this.loginUser(token);
});
}
}
@Injectable({
providedIn: 'root'
})
export class AuthService {
login(email: string, password: string) {
return this.userService.login(email, password).pipe(map(({token}: any) => this.storeToken(token)));
}
}
@Injectable()
export class UserService {
private isLoadingLogin: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
isLoading: Observable<boolean> = this.isLoadingLogin.asObservable();
login(user, password) {
this.isLoadingLogin.next(true);
console.log(this.isLoadingLogin.value);
return this.http.post(this.loginUrl, JSON.stringify({
user,
password
}), this.httpOptions)
.pipe(
catchError(error => this.errorHandleService.handleError('login', error)),
finalize(() => {
this.isLoadingLogin.next(false);
console.log(this.isLoadingLogin.value);
})
);
}
}
On a side note, I have verified the correct import of UserService within @NgModule.