mall-app/src/app/onboarding/onboarding.page.html

<ion-content>
    <ion-slides pager="false" [options]="slideOpts">
        <!-- Slide 1 -->
        <ion-slide class="page1">
            <figure class="logo">
                <img src="assets/custom/logo.svg">
            </figure>
            <header>
                Welcome to <br> the Mall Application
            </header>
            <p class="description">
                The best place to find the Malls, Food Centers, Shops and Parking Places!
            </p>
            <figure class="onboard-image">
                <img src="assets/custom/onboarding.svg">
            </figure>
            <ion-button class="next-button" shape="round" (click)="nextPage()">
                Get Started
            </ion-button>
            <p class="signin-description">
                Already have account? <a [routerLink]="['/login']"> Sign in </a>
            </p>
        </ion-slide>

        <!-- Slide 2 -->
        <!-- <ion-slide class="page2">
            <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
                <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
            </ion-button>
            <figure class="logo">
                <img src="assets/custom/logo.svg">
            </figure>
            <header>
                Do you want to turn <br> on notification?
            </header>
            <figure class="onboard-image">
                <img src="assets/custom/onboarding-2.svg">
            </figure>
            <ion-list lines="none">
                <ion-item>
                    <ion-icon slot="start" src="assets/custom/tick.svg"></ion-icon>
                    Malls around
                </ion-item>

                <ion-item>
                    <ion-icon slot="start" src="assets/custom/tick.svg"></ion-icon>
                    Attractive Offers
                </ion-item>

                <ion-item>
                    <ion-icon slot="start" src="assets/custom/tick.svg"></ion-icon>
                    Personalized Reminders
                </ion-item>
            </ion-list>
            <ion-button class="next-button" shape="round" (click)="nextPage()">
                Continue
            </ion-button>
            <p class="signin-description" (click)="nextPage()">
                <a> Not Now </a>
            </p>
        </ion-slide>  -->

        <!-- Slide 5 -->
        <ion-slide class="page5">
            <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
                <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
            </ion-button>
            <figure class="logo">
                <img src="assets/custom/logo.svg">
            </figure>
            <header>
                Now let's set up your <br> Profile
            </header>

            <div class="input-holder">
                <img src="assets/custom/name.svg">
                <input type="text" placeholder="Username" [(ngModel)]="credentials.username">
            </div>

            <div class="input-holder">
                <img src="assets/custom/email.svg">
                <input type="email" placeholder="Email ID" [(ngModel)]="credentials.email">
            </div>

            <div class="input-holder">
                <img src="assets/custom/name.svg">
                <input type="text" placeholder="Name" [(ngModel)]="credentials.name">
            </div>

            <div class="input-holder">
                <img src="assets/custom/india.svg">
                <input type="tel" placeholder="Mobile number" [(ngModel)]="credentials.mobile">
            </div>

            <div class="input-holder">
                <input *ngIf="!show_password" type="password" placeholder="Password"
                [(ngModel)]="credentials.password" (input)="checkPassword()">
                <input *ngIf="show_password" type="text" placeholder="Password"
                [(ngModel)]="credentials.password" (input)="checkPassword()">
                <ion-icon *ngIf="!show_password" name="eye" (click)="show_password = !show_password"></ion-icon>
                <ion-icon *ngIf="show_password" name="eye-off" (click)="show_password = !show_password"></ion-icon>
            </div>

            <ion-list lines="none">
                <ion-item [ngClass]="{'active' : credentials.password.length > 8 }">
                    <div class="check-ball"></div>
                    8 + Characters
                </ion-item>

                <ion-item [ngClass]="{'active' : has_upper }">
                    <div class="check-ball"></div>
                    Atleast 1 Uppercase
                </ion-item>

                <ion-item [ngClass]="{'active' : has_special }">
                    <div class="check-ball"></div>
                    Atleast 1 Symbol
                </ion-item>
            </ion-list>

            <ion-button class="next-button" shape="round" [disabled]="!this.credentials.mobile || !this.credentials.password || !this.credentials.email" 
            (click)="registerUser()">
                Continue
            </ion-button>
        </ion-slide>

        <ion-slide class="page4">
            <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
                <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
            </ion-button>
            <figure class="logo">
                <img src="assets/custom/logo.svg">
            </figure>
            <header>
                Please enter the otp sent <br> to your registered email id
            </header>

            <div class="input-holder">
                <img src="assets/custom/otp.svg">
                <input type="tel" placeholder="OTP" [(ngModel)]="otp">
            </div>

            <p class="signin-description">
                Didn't received OTP <a> Resend in 00:{{ padBefore(timer) }} </a>
            </p>

            <ion-button class="next-button" [disabled]="!otp" shape="round" (click)="validateUser()">
                Continue
            </ion-button>
        </ion-slide>

        <!-- Slide 6 -->
        <!-- <ion-slide class="page6">
            <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
                <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
            </ion-button>
            <figure class="logo">
                <img src="assets/custom/logo.svg">
            </figure>
            <div class="icon-holder">
                <ion-icon src="assets/custom/fingerprint.svg"></ion-icon>
            </div>
            <header>
                Enable Fingerprint
            </header>
            <p class="description">
                If you enable touch ID, you don't need to enter your password when you login.
            </p>
            <ion-button class="next-button" shape="round" (click)="nextPage()">
                Continue
            </ion-button>
            <p class="signin-description" (click)="nextPage()">
                <a> Not Now </a>
            </p>
        </ion-slide> -->

        <!-- Slide 7 -->
        <ion-slide class="page7">
            <figure class="logo">
                <img src="assets/custom/logo.svg">
            </figure>
            <header>
                You are ready to go!
            </header>
            <p class="description">
                Thanks for taking your time to create account with us.
                Now this is the fun part, let's explore the app.
            </p>
            <ion-button class="next-button" shape="round" (click)="autoLogin()">
                Get Started
            </ion-button>
        </ion-slide>
    </ion-slides>
</ion-content>