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" (click)="selected_order = order">
		<div class="order-mall" *ngFor="let order of userOrder.orderedlist">
			<div class="heading"> Order ID: {{ order.orderedlist_id }} </div>
			<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 *ngFor="let item of order.menuitems">
					<div class="order-item-details">
						<label class="name"> {{ item.menu_item_name }} x {{ item.item_quantity }} </label>
					</div>
				</li>
			</ul>
			<ul class="ordered-items">
				<li>
					<div class="order-item-details">
						<label class="name"> <strong> TOTAL </strong> </label>
						<label class="time"> <strong> &#8377; {{ order.total_price }} </strong> </label>
					</div>
				</li>
            </ul>
            
            <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>

			<div class="action-buttons-holder">
				<ion-button shape="round" (click)="reOrder(userOrder.orderedlist)"> Reorder </ion-button>
				<ion-button shape="round" fill="outline" (click)="selectedOrder = order"> Rate &amp; Review </ion-button>
			</div>
		</div>
	</li>
</ul>

<section class="common-semi-modal rating-modal" [ngClass]="{'active': selectedOrder}">
	<header> Rate &amp; Review <button (click)="selectedOrder = null"> 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 === 1, 
        'star2' : tempReview.rating === 2, 'star3' : tempReview.rating === 3, 
        'star4' : tempReview.rating === 4, 'star5': tempReview.rating === 5}">
			<ion-icon name="star" (click)="tempReview.rating = 1"></ion-icon>
			<ion-icon name="star" (click)="tempReview.rating = 2"></ion-icon>
			<ion-icon name="star" (click)="tempReview.rating = 3"></ion-icon>
			<ion-icon name="star" (click)="tempReview.rating = 4"></ion-icon>
			<ion-icon name="star" (click)="tempReview.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.comment"></textarea>
	</div>
    <ion-button size="block" shape="round"
    (click)="submitFeedbackForOrder()"> Submit Feedback </ion-button>
</section>