Mall Bookmark API connection

src/app/malls/malls.page.html

@@ -46,10 +46,14 @@
     </div>
 
     <ion-list lines="none" class="result-list">
-        <ion-item *ngFor="let mallData of tempMalls">
+        <ion-item *ngFor="let mallData of tempMalls; let index = index">
             <img src="{{ mallData.mall.image_url }}" slot="start">
             <ion-label>
-                <h3 (click)="showMallDetails(mallData)"> {{ mallData.mall.mall_name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mallData.mall.is_bookmarked }"></ion-icon> </h3>
+                <h3> 
+                    <span (click)="showMallDetails(mallData)"> {{ mallData.mall.mall_name }} </span>  
+                    <ion-icon (click)="toggleMallBookmark(index)" name="bookmark" 
+                    [ngClass]="{'active' : mallData.mall.is_bookmarked }"></ion-icon> 
+                </h3>
                 <p class="description" (click)="showMallDetails(mallData)"> {{ mallData.mall.description }} </p>
                 <div class="offers-holder">
                     <div class="offer">

src/app/malls/malls.page.ts

@@ -25,12 +25,14 @@ export class MallsPage implements OnInit {
     ) { }
 
     ngOnInit() {
-        if (localStorage.allMalls) {
-            this.allMalls = JSON.parse(localStorage.allMalls);
-            this.tempMalls = JSON.parse(localStorage.allMalls);
-        } else {
-            this.getMallsByLocation()
-        }
+        this.getMallsByLocation();
+    }
+
+    toggleMallBookmark(index: number) {
+        this.tempMalls[index].mall.is_bookmarked = !this.tempMalls[index].mall.is_bookmarked;
+        this.allMalls[index].mall.is_bookmarked = !this.allMalls[index].mall.is_bookmarked;
+        localStorage.allMalls = JSON.stringify(this.allMalls);
+        this.mallService.updateMallData(this.tempMalls[index]);
     }
 
     doRefresh(e: any) {

src/app/services/mall.service.ts

@@ -35,4 +35,17 @@ export class MallService {
 
 		return await this.http.get(URL + '/api/maioraservice/mall/getallmalls/', httpOptions).toPromise();
     }
+
+
+    async updateMallData(mallData: any) {
+		const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + localStorage.access_Token
+			})
+		};
+
+		return await this.http.put(URL + '/api/maioraservice/mall/v1/update/', mallData.mall , httpOptions).toPromise();
+	}
 }