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

<ion-content>
    <section class="profile">
        <div class="profile-details-holder">
            <figure class="profile-image">
                <img src="assets/custom/name.svg" alt="">
            </figure>
            <div class="content">
                <h5>
                    <span> {{ userInfo.name }} </span>
                    <!-- <input *ngIf="showEdit" type="text" [(ngModel)]="userInfo.name"> -->

                    <button *ngIf="!showEdit" (click)="showEdit = true"> Edit </button>
                    <button *ngIf="showEdit" (click)="showEdit = false; updateUserInfo();"> Save </button>
                </h5>
                <p>
                    <span *ngIf="!showEdit"> {{ userInfo.mobile }} </span>
                    <input *ngIf="showEdit" type="tel" [(ngModel)]="userInfo.mobile">
                </p>
                <p>
                    <span *ngIf="!showEdit"> {{ userInfo.email }} </span>
                    <input *ngIf="showEdit" type="tel" [(ngModel)]="userInfo.email">
                </p>
            </div>
        </div>
        <div class="location-details">
            <div class="location"> Nagarbhavi, Bengaluru KA </div>
            <ion-button size="small"> <ion-icon name="locate"></ion-icon> </ion-button>
        </div>
    </section>

    <div class="tabs-holder">
        <div class="tab" [ngClass]="{'active' : selected_tab === 'MY ORDERS'}"
        (click)="selected_tab = 'MY ORDERS'">
            <figure>
                <img src="assets/custom/dinner.svg">
            </figure>
            <span> MY ORDERS </span>
        </div>
        <div class="tab" [ngClass]="{'active' : selected_tab === 'REFER AND EARN'}"
        (click)="selected_tab = 'REFER AND EARN'">
            <figure>
                <img src="assets/custom/profit.svg">
            </figure>
            <span> REFER &amp; EARN </span>
        </div>
        <div class="tab" [ngClass]="{'active' : selected_tab === 'NOTIFICATION'}"
        (click)="selected_tab = 'NOTIFICATION'">
            <figure>
                <img src="assets/custom/hotel-bell.svg">
            </figure>
            <span> NOTIFICATION </span>
        </div>
        <div class="tab" (click)="logout()">
            <figure>
                <img src="assets/custom/logout.svg">
            </figure>
            <span> LOGOUT </span>
        </div>
    </div>

	<app-notifications *ngIf="selected_tab === 'NOTIFICATION'"></app-notifications>
	<app-refer *ngIf="selected_tab === 'REFER AND EARN'"></app-refer>
	<app-orders *ngIf="selected_tab === 'MY ORDERS'"></app-orders>

</ion-content>