I have a checkout page where the user must log in before proceeding. The user may already be logged in. In both cases, I want to display a spinner while the component checks if the user is logged in or not.
The code in check-out.html appears as follows:
<div *ngIf="showSpinner">
<app-spinner></app-spinner>
</div>
<div *ngIf="auth.user | async; then authenticated else guest">
<!-- template will replace this div -->
</div>
<!-- User NOT logged in -->
<ng-template #guest>
<div *ngIf="auth.user == null" class="call-to-action">
login buttons...
</div>
</ng-template>
<!-- User logged in -->
<ng-template #authenticated>
payment steps
</ng-template>
My check-out-component looks like this:
export class CheckoutComponent implements OnInit {
private showSpinner = true;
constructor(public auth: AuthService,
private router: Router) {
}
ngOnInit() {
this.auth.user.subscribe(user => {
this.showSpinner = false;
});
}
...
Currently, the spinner is always displayed, but I would like to only load the spinner first and then either #guest or #authenticated. How can I achieve this?
I have done some research but have found that ngIf can only handle if-else conditions.