Mall details connection complete

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

@@ -4,33 +4,33 @@
     <div class="header-bar" [ngClass]="{'active' : show_top_bar }">
         <div class="heading-holder">
             <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
-            <h3> {{ mall_details.mall.mall_name }} </h3>
+            <h3> {{ mall_details.mall_name }} </h3>
         </div>
         <div class="stats-holder">
-            <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.mall.rating }} </div>
-            <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.mall.mall_distance }} km</div>
+            <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.rating }} </div>
+            <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.mall_distance }} km</div>
         </div>
         <div class="utilities-buttons-holder">
-            <button [ngClass]="{'active' : mall_details.mall.is_bookmarked }"> <ion-icon name="bookmark"></ion-icon> </button>
+            <button [ngClass]="{'active' : mall_details.is_bookmarked }"> <ion-icon name="bookmark"></ion-icon> </button>
             <button> <ion-icon name="share"></ion-icon> </button>
-            <a target="_blank" href="https://maps.google.com/?q={{ mall_details.latitude }},{{ mall_details.longitude }}">
+            <a target="_blank" href="https://maps.google.com/?q=">
                 <ion-icon name="navigate"></ion-icon>
             </a>
         </div>
     </div>
 
     <div class="upfold-holder">
-		<img [src]="mall_details.mall.image_url">
+		<img [src]="mall_details.image_url">
         <div class="icons-holder">
             <div>
                 <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
             </div>
             <div class="action-buttons-holder">
-                <button [ngClass]="{'active' : mall_details.mall.is_bookmarked }">
+                <button [ngClass]="{'active' : mall_details.is_bookmarked }">
                     <ion-icon name="bookmark"></ion-icon>
                 </button>
                 <button> <ion-icon name="share"></ion-icon> </button>
-				<a target="_blank" href="https://maps.google.com/?q={{ mall_details.latitude }},{{ mall_details.longitude }}">
+				<a target="_blank" href="https://maps.google.com/?q=">
 	                <ion-icon name="navigate"></ion-icon>
 	            </a>
             </div>
@@ -38,13 +38,13 @@
     </div>
     <div class="card-holder">
         <div class="card">
-            <h3> {{ mall_details.mall.mall_name }} </h3>
-			<p> {{ mall_details.mall.mall_address }} </p>
+            <h3> {{ mall_details.mall_name }} </h3>
+			<p> {{ mall_details.mall_address }} </p>
             <div class="stats-holder">
-                <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.mall.rating }} </div>
-                <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.mall.mall_distance }} km</div>
+                <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.rating }} </div>
+                <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.mall_distance }} km</div>
             </div>
-            <p> {{ mall_details.mall.description }} </p>
+            <p> {{ mall_details.description }} </p>
         </div>
     </div>
 
@@ -55,18 +55,17 @@
         (click)="selected_tab = 'shopping'"> SHOPS </button>
     </div>
 
-    <!-- <div class="results-utilities-holder">
-        <h5 *ngIf="mall_details"> {{ mall_details.outlets.length }} OUTLETS </h5>
+    <div class="results-utilities-holder">
+        <h5 *ngIf="mall_details"> {{ mall_details.outlet.length }} OUTLETS </h5>
         <ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
     </div>
 
     <ion-list lines="none" class="result-list" *ngIf="selected_tab === 'food'">
-        <ion-item *ngFor="let outlet of mall_details.outlets" [ngClass]="{'show' : outlet.outlet_type === 'FOOD' }"
-        (click)="outletDetails(mall_details.id, outlet.id)">
+        <ion-item *ngFor="let outlet of mall_details.outlet">
             <img src="{{ outlet.image_url }}" slot="start">
             <ion-label>
                 <h3>
-                    {{ outlet.name }}
+                    {{ outlet.outlet_name }}
                     <div class="rating-holder">
                         <ion-icon name="star"></ion-icon> {{ outlet.rating }}
                     </div>
@@ -80,8 +79,8 @@
                 </p>
                 <div class="offers-holder">
                     <div class="offer">
-                        <span *ngIf="outlet.outlet_type === 'FOOD'"> <ion-icon name="restaurant"></ion-icon> Food </span>
-                        <span *ngIf="outlet.outlet_type === 'SHOP'"> <ion-icon name="basket"></ion-icon> Shopping </span>
+                        <span *ngIf="outlet.outlet_type"> <ion-icon name="restaurant"></ion-icon> Food </span>
+                        <span *ngIf="!outlet.outlet_type"> <ion-icon name="basket"></ion-icon> Shopping </span>
                         Offers: <strong> {{ outlet.offers.length }}  </strong>
                     </div>
                 </div>
@@ -89,36 +88,7 @@
         </ion-item>
     </ion-list>
 
-    <ion-list lines="none" class="result-list" *ngIf="selected_tab === 'shopping'">
-        <ion-item *ngFor="let outlet of mall_details.outlets" [ngClass]="{'show' : outlet.outlet_type === 'SHOP' }">
-            <img src="{{ outlet.image_url }}" slot="start">
-            <ion-label>
-                <h3>
-                    {{ outlet.name }}
-                    <div class="rating-holder">
-                        <ion-icon name="star"></ion-icon> {{ outlet.rating }}
-                    </div>
-                    <ion-icon name="bookmark" [ngClass]="{'active' : outlet.is_bookmarked }"></ion-icon>
-                </h3>
-                <p class="description">
-                    {{ outlet.description }}
-                    <button class="share-button">
-                        <ion-icon name="share"></ion-icon>
-                    </button>
-                </p>
-                <div class="offers-holder">
-                    <div class="offer">
-                        <span *ngIf="outlet.outlet_type === 'FOOD'"> <ion-icon name="restaurant"></ion-icon> Food </span>
-                        <span *ngIf="outlet.outlet_type === 'SHOP'"> <ion-icon name="basket"></ion-icon> Shopping </span>
-                        Offers: <strong> {{ outlet.offers.length }}  </strong>
-                    </div>
-                </div>
-            </ion-label>
-        </ion-item>
-    </ion-list> -->
-
-
-    <!-- <div class="advertisement-slots">
+    <div class="advertisement-slots">
         <figure>
             <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
         </figure>
@@ -138,7 +108,7 @@
         <figure>
             <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
         </figure>
-    </div> -->
+    </div>
 
     <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>
@@ -156,11 +126,6 @@
                 <div class="icon-holder"> <ion-icon name="star"></ion-icon> </div>
                 <span> RATING </span>
             </button>
-            <button [ngClass]="{'active' : selected_sort === 'time'}"
-            (click)="sortBy('time')">
-                <div class="icon-holder"> <ion-icon name="time"></ion-icon> </div>
-                <span> TIME </span>
-            </button>
         </div>
     </div>
 

src/app/mall-details/mall-details.page.scss

@@ -236,12 +236,6 @@
 
 .result-list {
     ion-item {
-        display: none;
-
-        &.show {
-            display: block;
-        }
-
         h3 .rating-holder {
             font-size: 9px;
             margin-left: auto;

src/app/mall-details/mall-details.page.ts

@@ -29,11 +29,6 @@ export class MallDetailsPage implements OnInit {
         this.location.back();
     }
 
-    // toggleBookmark(mall_details: IMall) {
-    //     mall_details.is_bookmarked = !mall_details.is_bookmarked;
-	// 	this.mallService.updateMall(mall_details);
-    // }
-
     onScroll(event: any) {
         if (event.detail.scrollTop > 100) {
             this.show_top_bar = true;
@@ -49,13 +44,13 @@ export class MallDetailsPage implements OnInit {
     sortBy(type: string) {
         this.selected_sort = type;
         switch(this.selected_sort) {
-            case 'name': this.mall_details.outlets.sort(function(a, b){
-                if(a.name < b.name) { return -1; }
-                if(a.name > b.name) { return 1; }
+            case 'name': this.mall_details.outlet.sort(function(a: any, b: any){
+                if(a.outlet_name < b.outlet_name) { return -1; }
+                if(a.outlet_name > b.outlet_name) { return 1; }
                 return 0;
             });
             break;
-            case 'rating': this.mall_details.outlets.sort(function(a, b){
+            case 'rating': this.mall_details.outlet.sort(function(a: any, b: any){
                 if(a.rating < b.rating) { return -1; }
                 if(a.rating > b.rating) { return 1; }
                 return 0;