Fetch all malls data connection with UI Complete along with search and sort module connection

src/app/malls/malls.page.html

@@ -3,8 +3,8 @@
 
     <section class="header-bar">
         <h2 *ngIf="!showSearchBar"> Find malls near you </h2>
-        <input type="text" *ngIf="showSearchBar" placeholder="Search Malls" [(ngModel)]="searchTerm" (input)="searchAllMalls()" autocomplete="off">
-        <button (click)="showSearchBar = !showSearchBar">
+        <input type="text" *ngIf="showSearchBar" placeholder="Search Malls" [(ngModel)]="searchTerm" (input)="searchAllMalls()" autocomplete="off" #searchbar>
+        <button (click)="toggleSearchBar()">
             <ion-icon *ngIf="!showSearchBar" src="assets/custom/search.svg"></ion-icon>
             <ion-icon *ngIf="showSearchBar" name="close" mode="md"></ion-icon>
         </button>
@@ -32,29 +32,29 @@
     </div>
 
     <div class="results-utilities-holder">
-        <h5 *ngIf="malls"> {{ malls.length }} MALLS </h5>
+        <h5 *ngIf="tempMalls"> {{ tempMalls.length }} MALLS </h5>
         <ion-button color="default" fill="clear" (click)="show_sort_popup = true"> SORT / FILTER </ion-button>
     </div>
 
     <ion-list lines="none" class="result-list">
-        <ion-item *ngFor="let mallData of malls" (click)="showMallDetails(mallData)">
-            <img src="{{ mallData.mall.image_url }}" slot="start">
+        <ion-item *ngFor="let mall of tempMalls" (click)="showMallDetails(mall)">
+            <img src="{{ mall.image_url }}" slot="start">
             <ion-label>
-                <h3> {{ mallData.mall.mall_name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mallData.mall.is_bookmarked }"></ion-icon> </h3>
-                <p class="description"> {{ mallData.mall.description }} </p>
+                <h3> {{ mall.mall_name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mall.is_bookmarked }"></ion-icon> </h3>
+                <p class="description"> {{ mall.description }} </p>
                 <div class="offers-holder">
                     <div class="offer">
                         <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
-						Food Offers: <strong> {{ mallData.mall.offers_count }}  </strong>
+						Food Offers: <strong> {{ mall.offers_count }}  </strong>
                     </div>
                 </div>
                 <div class="utilities-holder">
                     <div class="container">
                         <div class="utility">
-                            <ion-icon name="star"></ion-icon> {{ mallData.mall.rating }}
+                            <ion-icon name="star"></ion-icon> {{ mall.rating }}
                         </div>
                         <div class="utility">
-                            <ion-icon name="pin"></ion-icon> {{ mallData.mall.mall_distance }} km
+                            <ion-icon name="pin"></ion-icon> {{ mall.mall_distance }} km
                         </div>
                     </div>
 
@@ -63,7 +63,7 @@
                             <ion-icon name="share"></ion-icon>
                         </button>
                         <a class="utility-button" target="_blank"
-                        href="https://maps.google.com/?q={{ mallData.latitude }},{{ mallData.longitude }}">
+                        href="https://maps.google.com/?q=">
                             <ion-icon name="navigate"></ion-icon>
                         </a>
                     </div>
@@ -72,18 +72,20 @@
         </ion-item>
     </ion-list>
 
-    <!-- <section class="advertisement">
-        <div class="heading-holder">
-            <img src="assets/custom/logo.svg">
-            <header>
-                MALL FASTRACK - <span> Get your food faster then any others </span>
-            </header>
+    <section class="advertisement" *ngIf="tempMalls.length > 0">
+        <div *ngIf="tempMalls[0].advertisement[0]">
+            <div class="heading-holder">
+                <img [src]="tempMalls[0].advertisement[0].image">
+                <header>
+                    {{ tempMalls[0].advertisement[0].mallname }} - <span> Get your food faster then any others </span>
+                </header>
+            </div>
+            <p class="description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eius molestiae ipsum fugit velit voluptatem vel ad ut debitis earum, nostrum numquam odio maxime eaque corporis! Non et cumque, dignissimos.
+            </p>
+            <a> Know More </a>
         </div>
-        <p class="description">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eius molestiae ipsum fugit velit voluptatem vel ad ut debitis earum, nostrum numquam odio maxime eaque corporis! Non et cumque, dignissimos.
-        </p>
-        <a> Know More </a>
-    </section> -->
+    </section>
 
     <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>

src/app/malls/malls.page.scss

@@ -78,7 +78,6 @@
 }
 
 .advertisement {
-    height: 150px;
     background-image: url('../../assets/custom/background-5.svg');
     background-size: cover;
     background-repeat: no-repeat;
@@ -91,7 +90,6 @@
     .heading-holder {
         display: flex;
         width: 100%;
-        justify-content: space-between;
         align-items: center;
 
         img {
@@ -99,7 +97,7 @@
             background-color: white;
             height: 45px;
             border-radius: 50%;
-            padding: 10px;
+            padding: 1px;
         }
 
         header {
@@ -119,6 +117,7 @@
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+        margin-top: 5px;
     }
 
     a {

src/app/malls/malls.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild,ElementRef } from '@angular/core';
 import { MallService } from '../services/mall.service';
 import { Router } from '@angular/router';
 
@@ -8,8 +8,9 @@ import { Router } from '@angular/router';
     styleUrls: ['./malls.page.scss'],
 })
 export class MallsPage implements OnInit {
+    @ViewChild('searchbar', null) searchElement: ElementRef;
     selected_tab: string = 'you';
-    malls: any = [];
+    tempMalls: any = [];
     allMalls: any = [];
     show_sort_popup: boolean = false;
     showSearchBar: boolean = false;
@@ -22,33 +23,23 @@ export class MallsPage implements OnInit {
     ) { }
 
     ngOnInit() {
-        this.fetchMallsByLocation();
         this.storeAllMalls();
     }
 
-	fetchMallsByLocation() {
-        if (navigator.geolocation) {
-			navigator.geolocation.getCurrentPosition((position) => {
-				// position.coords.latitude, position.coords.longitude;
-                this.mallService.mallsByLocation(28.6569551, 77.2122032).then((response) => {
-        			this.malls = response;
-                    console.log(this.malls);
-        		}, (error) => {
-        			console.log(error);
-        		});
-			});
-		} else {
-            console.log("Could not fetch the malls");
-        }
-	}
+    toggleSearchBar() {
+        this.showSearchBar = !this.showSearchBar;
+        setTimeout(()=>{ // this will make the execution after the above boolean has changed
+            this.searchElement.nativeElement.focus();
+        }, 1);
+    }
 
     searchAllMalls() {
         if (this.searchTerm.trim().length > 0) {
-            this.malls = this.allMalls.filter((mall) => {
+            this.tempMalls = this.allMalls.filter((mall: any) => {
                 return mall.mall_name.toLowerCase().includes(this.searchTerm.toLowerCase());
             });
         } else {
-            this.fetchMallsByLocation();
+            this.tempMalls = JSON.parse(JSON.stringify(this.allMalls));
         }
     }
 
@@ -56,7 +47,7 @@ export class MallsPage implements OnInit {
         this.mallService.allMalls().then((response) => {
             localStorage.allMalls = JSON.stringify(response);
             this.allMalls = JSON.parse(localStorage.allMalls);
-            console.log(this.allMalls);
+            this.tempMalls = JSON.parse(localStorage.allMalls);
         }, (error) => {
             console.log(error)
         });
@@ -69,15 +60,15 @@ export class MallsPage implements OnInit {
     sortBy(type: string) {
         this.selected_sort = type;
         switch(this.selected_sort) {
-            case 'name': this.malls.sort(function(a, b){
-                if(a.mall.mall_name < b.mall.mall_name) { return -1; }
-                if(a.mall.mall_name > b.mall.mall_name) { return 1; }
+            case 'name': this.tempMalls.sort(function(a: any, b: any){
+                if(a.mall_name < b.mall_name) { return -1; }
+                if(a.mall_name > b.mall_name) { return 1; }
                 return 0;
             });
             break;
-            case 'rating': this.malls.sort(function(a, b){
-                if(a.mall.rating < b.mall.rating) { return -1; }
-                if(a.mall.rating > b.mall.rating) { return 1; }
+            case 'rating': this.tempMalls.sort(function(a: any, b: any){
+                if(a.rating < b.rating) { return -1; }
+                if(a.rating > b.rating) { return 1; }
                 return 0;
             }).reverse();
             break;