Problem in flipping card

<mdb-card-rotating #cards> <!--Front Side--> <div class="face front tp-box_side tp-box_front" style="height: auto;"> <div class="card"> <div class="card-body"> <h4><u>Personal Information:</u> <a *ngIf="sessionUser && user && sessionUser.id==user.id" (click)="cards.toggle()" class="float-right"><i class="fa fa-pencil" aria-hidden="true"></i></a></h4> <div> <div class="row"> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>First Name:</strong> </div> <div class="col-md-6"> {{user.first_name}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Middle Name:</strong> </div> <div class="col-md-6"> {{user.middle_name}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Last Name:</strong> </div> <div class="col-md-6"> {{user.last_name}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Gender:</strong> </div> <div class="col-md-6"> {{user.gender}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Father's Name:</strong> </div> <div class="col-md-6"> {{user.fname}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Mother's Name:</strong> </div> <div class="col-md-6"> {{user.mname}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Date of Birth:</strong> </div> <div class="col-md-6"> {{user.dob | date: 'mediumDate'}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Social Status:</strong> </div> <div class="col-md-6"> {{user.social_status}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Email-Id:</strong> </div> <div class="col-md-6"> {{user.email}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Date of Membership:</strong> </div> <div class="col-md-6"> {{user.dom | date: 'mediumDate'}} </div> </div> </div> <div class="col-md-6 mt-4"> <div class="row"> <div class="col-md-6"> <strong>Spouse Phone:</strong> </div> <div class="col-md-6"> {{user.spoce_phone}} </div> </div> </div> </div> </div> </div> </div> </div> <!--Back Side--> <div class="back tp-box_side tp-box_back" *ngIf="sessionUser && user && sessionUser.id==user.id" style="height: auto;padding: 0;"> <div class="card"> <div class="card-body"> <h4><u>Edit Personal Information:</u> <a (click)="cards.toggle()" class="float-right"><i class="fa fa-close" aria-hidden="true"></i></a></h4> <div> <form [formGroup]="userEdit" (ngSubmit)="edituser()"> <div class="row"> <div class="col-md-6"> <div class="md-form"> <input mdbActive formControlName="first_name" type="text" id="first_name" class="form-control" [ngClass]="userEdit.controls['first_name'].invalid && userEdit.controls['first_name'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['first_name'].invalid && userEdit.controls['first_name'].touched ? 'invalid': 'valid'"> <label for="first_name" class="">first_name</label> </div> </div> <div class="col-md-6"> <div class="md-form"> <input mdbActive formControlName="middle_name" type="text" id="middle_name" class="form-control" [ngClass]="userEdit.controls['middle_name'].invalid && userEdit.controls['middle_name'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['middle_name'].invalid && userEdit.controls['middle_name'].touched ? 'invalid': 'valid'"> <label for="middle_name" class="">Middle Name</label> </div> </div> <div class="col-md-6"> <div class="md-form"> <input mdbActive formControlName="last_name" type="text" id="last_name" class="form-control" [ngClass]="userEdit.controls['last_name'].invalid && userEdit.controls['last_name'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['last_name'].invalid && userEdit.controls['last_name'].touched ? 'invalid': 'valid'"> <label for="last_name" class="">Last Name</label> </div> </div> <div class="col-md-6"> <div> <mdb-select [options]="gender" placeholder="Choose your option" formControlName="gender" class="form-control" [ngClass]="userEdit.controls['gender'].invalid && userEdit.controls['gender'].touched ? 'invalid': 'valid'"></mdb-select> <label>Gender</label> </div> </div> <div class="col-md-6"> <div class="md-form"> <input mdbActive formControlName="fname" type="text" id="fname" class="form-control" [ngClass]="userEdit.controls['fname'].invalid && userEdit.controls['fname'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['fname'].invalid && userEdit.controls['fname'].touched ? 'invalid': 'valid'"> <label for="fname" class="">Father's Name</label> </div> </div> <div class="col-md-6"> <div class="md-form"> <input mdbActive formControlName="mname" type="text" id="mname" class="form-control" [ngClass]="userEdit.controls['mname'].invalid && userEdit.controls['mname'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['mname'].invalid && userEdit.controls['mname'].touched ? 'invalid': 'valid'"> <label for="mname" class="">Mother's Name</label> </div> </div> <div class="col-md-6"> <div class="md-form"> <mdb-date-picker formControlName="dob" [options]="dobOption" placeholder="Selected date"></mdb-date-picker> </div> </div> <div class="col-md-6"> <div class="md-form"> <mdb-select [options]="social_status" placeholder="Choose your option" formControlName="social_status" class="form-control" [ngClass]="userEdit.controls['social_status'].invalid && userEdit.controls['social_status'].touched ? 'invalid': 'valid'"></mdb-select> <label>Social Status</label> </div> </div> <div class="col-md-6"> <div class="md-form"> <input mdbActive formControlName="email" type="text" id="email" class="form-control" [ngClass]="userEdit.controls['email'].invalid && userEdit.controls['email'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['email'].invalid && userEdit.controls['email'].touched ? 'invalid': 'valid'"> <label for="email" class="">Email-Id</label> </div> </div> <div class="col-md-6"> <div class="md-form"> <mdb-date-picker formControlName="dom" [options]="domOption" placeholder="Selected date"></mdb-date-picker> </div> </div> <div class="col-md-6"> <div class="md-form"> <input mdbActive formControlName="spoce_phone" type="text" id="spoce_phone" class="form-control" [ngClass]="userEdit.controls['spoce_phone'].invalid && userEdit.controls['spoce_phone'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['spoce_phone'].invalid && userEdit.controls['spoce_phone'].touched ? 'invalid': 'valid'"> <label for="spoce_phone" class="">Spouse Phone</label> </div> </div> <div class="col-md-6"> <button type="submit" class="btn btn-md btn-primary btn-rounded waves-light float-right" [disabled]="!userEdit.valid" mdbRippleRadius>SUBMIT</button> </div> </div> </form> </div> </div> </div> </div> <!--/.Back Side--> </mdb-card-rotating>

---