mall-app/src/app/forgot-password/forgot-password.page.html

<ion-content>
    <section class="login" *ngIf="stepType === 'EMAIL'">
        <header>
            Reset Password
        </header>
        <p class="description">
            Please enter to your email
        </p>

        <div class="input-holder">
            <input type="email" placeholder="Email ID" [(ngModel)]="email">
        </div>

        <ion-button class="login-button" shape="round" size="block" (click)="getOtp()"> Get OTP </ion-button>

        <p class="signin-description"> <a [routerLink]="['/login']"> Login </a> </p>
    </section>

    <section class="login" *ngIf="stepType === 'OTP'">
        <header>
            Reset Password
        </header>
        <p class="description">
            Please verify the OTP
        </p>

        <div class="input-holder">
            <input type="tel" placeholder="OTP" [(ngModel)]="otp">
        </div>

        <ion-button class="login-button" shape="round" size="block" (click)="verifyOtp()"> Verify OTP </ion-button>

        <p class="signin-description"> <a (click)="stepType = 'EMAIL'"> Go to previous step? </a> </p>
    </section>

    <section class="login" *ngIf="stepType === 'RESET'">
        <header>
            Reset Password
        </header>
        <p class="description">
            Please enter your new Password
        </p>

        <div class="input-holder">
            <input type="password" placeholder="Password" [(ngModel)]="newPassword">
        </div>

        <ion-button class="login-button" shape="round" size="block" (click)="resetPassword()"> Reset Password </ion-button>

        <p class="signin-description"> <a (click)="stepType = 'EMAIL'"> Go to previous step? </a> </p>
    </section>
</ion-content>