mall-app/src/app/orders/orders.component.html

<div class="heading-holder">
	<div class="name"> MY ORDERS </div>
	<!-- <ion-button fill="clear"> SORT / FILTER </ion-button> -->
</div>

<ul class="orders">
	<li *ngFor="let userOrder of userOrders" class="order">
		<div class="order-container">
            <div class="heading"> Order ID: {{ userOrder.orders_id }} </div>

            <section class="individual-order" *ngFor="let order of userOrder.orderedlist">                
                <div class="time-details">
                    Pickup on {{ getFormattedDate(order.pickup_time, 'DD MMMM YYYY @ hh:mm A') }}
                </div>
                <div class="time-details">
                    <p>
                        <strong>Mall:</strong> {{ order.mall_name }}
                    </p>
                    <p>
                        <strong>Outlet:</strong> {{ order.outlet_name }}
                    </p>
                </div>

                <ul class="ordered-items">
                    <li>
                        <div class="order-item-details">
                            <label class="name"> {{ order.menuitems.menu_item_name }} x {{ order.quantity }} </label>
                        </div>
                    </li>
                </ul>
                <ul class="ordered-items">
                    <li>
                        <div class="order-item-details">
                            <label class="name"> <strong> Price </strong> </label>
                            <label class="time"> <strong> &#8377; {{ order.total_price }} </strong> </label>
                        </div>
                    </li>
                </ul>
                                
            </section>

            <ul class="ordered-items">
                <li>
                    <div class="order-item-details">
                        <label class="name"> <strong> STATUS </strong> </label>
                        <label class="time"> <strong> {{ getOrderStatusName(userOrder.orderstatus.orderstatus_id) }} </strong> </label>
                    </div>
                </li>
            </ul>

            <p class="note">
                We will notify you each time a order is ready for pickup
            </p>            
            
            <section class="ratings" *ngIf="userOrder.rating">
                <div class="star-holder" [ngClass]="{ 'star1' : userOrder.rating.rating === 1, 
                'star2' : userOrder.rating.rating === 2, 'star3' : userOrder.rating.rating === 3, 
                'star4' : userOrder.rating.rating === 4, 'star5': userOrder.rating.rating === 5}">
                    <ion-icon name="star" (click)="userOrder.rating.rating = 1"></ion-icon>
                    <ion-icon name="star" (click)="userOrder.rating.rating = 2"></ion-icon>
                    <ion-icon name="star" (click)="userOrder.rating.rating = 3"></ion-icon>
                    <ion-icon name="star" (click)="userOrder.rating.rating = 4"></ion-icon>
                    <ion-icon name="star" (click)="userOrder.rating.rating = 5"></ion-icon>
                </div>
                <p>
                    {{ userOrder.rating.comment }}
                </p>
            </section>

            <div class="action-buttons-holder">
                <ion-button shape="round" (click)="reOrder(userOrder.orderedlist)"> Reorder </ion-button>
                <ion-button *ngIf="!userOrder.rating" shape="round" fill="outline" (click)="showAddReview = true; selectedOrder = userOrder"> Rate &amp; Review </ion-button>
            </div>

        </div>
	</li>
</ul>

<section class="common-semi-modal rating-modal" [ngClass]="{'active': showAddReview}">
	<header> Rate &amp; Review <button (click)="showAddReview = false"> Close </button> </header>
	<div class="rating">
		<div class="semi-heading"> Rating </div>
		<p> Rating the food will help us give you personalised recommendation </p>
        <div class="star-holder" [ngClass]="{ 'star1' : tempReview.rating.rating === 1, 
        'star2' : tempReview.rating.rating === 2, 'star3' : tempReview.rating.rating === 3, 
        'star4' : tempReview.rating.rating === 4, 'star5': tempReview.rating.rating === 5}">
			<ion-icon name="star" (click)="tempReview.rating.rating = 1"></ion-icon>
			<ion-icon name="star" (click)="tempReview.rating.rating = 2"></ion-icon>
			<ion-icon name="star" (click)="tempReview.rating.rating = 3"></ion-icon>
			<ion-icon name="star" (click)="tempReview.rating.rating = 4"></ion-icon>
			<ion-icon name="star" (click)="tempReview.rating.rating = 5"></ion-icon>
		</div>
	</div>
	<div class="review">
		<div class="semi-heading"> Review </div>
		<textarea placeholder="Please tell something about the food..." [(ngModel)]="tempReview.rating.comment"></textarea>
	</div>
    <ion-button size="block" shape="round"
    (click)="submitFeedbackForOrder()"> Submit Feedback </ion-button>
</section>