<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center"> <mat-card class="box" *ngIf="!isLoading"> <mat-card-header> <mat-card-title>Log in</mat-card-title> </mat-card-header> <form class="form" [formGroup]="loginFormGroup"> <mat-card-content> <mat-form-field class="full-width"> <mat-label>Username</mat-label> <input matInput placeholder="Enter the User's Email address" formControlName="emailaddress"> </mat-form-field> <mat-form-field class="full-width"> <mat-label>Password</mat-label> <input matInput type="password" placeholder="Enter the User's Password" formControlName="password"> </mat-form-field> </mat-card-content> <button mat-stroked-button color="primary" class="btn-block" (click)="LoginUser()">Log in</button> <div>Don't have an account? Register <a [routerLink]="['../register']">here</a></div> </form> </mat-card> <mat-progress-spinner mode="indeterminate" value="50" *ngIf="isLoading"> </mat-progress-spinner> </div>