share details navigator API connection

src/app/login/login.page.ts

@@ -10,7 +10,7 @@ import { ToastService } from '../services/toast.service';
 })
 export class LoginPage implements OnInit {
     credentials = {
-        username: 'rakeshsrh',
+        username: 'geethu',
         password: '123456789',
         login_type: 'user'
     };

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

@@ -12,7 +12,7 @@
         </div>
         <div class="utilities-buttons-holder">
             <button [ngClass]="{'active' : mallDetails.mall.is_bookmarked }"> <ion-icon name="bookmark"></ion-icon> </button>
-            <button> <ion-icon name="share"></ion-icon> </button>
+            <button (click)="shareMallDetails(mallDetails)"> <ion-icon name="share"></ion-icon> </button>
             <a target="_blank" href="https://maps.google.com/?q={{ mallDetails.latitude }},{{ mallDetails.longitude }}">
                 <ion-icon name="navigate"></ion-icon>
             </a>
@@ -29,7 +29,7 @@
                 <button [ngClass]="{'active' : mallDetails.mall.is_bookmarked }">
                     <ion-icon name="bookmark"></ion-icon>
                 </button>
-                <button> <ion-icon name="share"></ion-icon> </button>
+                <button (click)="shareMallDetails(mallDetails)"> <ion-icon name="share"></ion-icon> </button>
 				<a target="_blank" href="https://maps.google.com/?q={{ mallDetails.latitude }},{{ mallDetails.longitude }}">
 	                <ion-icon name="navigate"></ion-icon>
 	            </a>
@@ -61,10 +61,10 @@
     </div>
 
     <ion-list lines="none" class="result-list" *ngIf="selected_tab === 'food'">
-        <ion-item *ngFor="let outlet of mallDetails.mall.outlet" (click)="outletDetails(outlet)">
+        <ion-item *ngFor="let outlet of mallDetails.mall.outlet">
             <img src="{{ outlet.image_url }}" slot="start">
             <ion-label>
-                <h3>
+                <h3 (click)="outletDetails(outlet)">
                     {{ outlet.outlet_name }}
                     <div class="rating-holder">
                         <ion-icon name="star"></ion-icon> {{ outlet.rating }}
@@ -72,8 +72,9 @@
                     <ion-icon name="bookmark" [ngClass]="{'active' : outlet.is_bookmarked }"></ion-icon>
                 </h3>
                 <p class="description">
-                    {{ outlet.description }}
-                    <button class="share-button">
+                    <span (click)="outletDetails(outlet)"> {{ outlet.description }} </span>                    
+                    <button class="share-button"
+                    (click)="shareOutletDetails(outlet)">
                         <ion-icon name="share"></ion-icon>
                     </button>
                 </p>

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

@@ -28,6 +28,31 @@ export class MallDetailsPage implements OnInit {
         this.location.back();
     }
 
+    shareMallDetails(mallData) {
+        if (window.navigator && window.navigator['share']) {
+            const shareData = {
+                title: mallData.mall.mall_name,
+                text: mallData.mall.description,
+                url: 'https://maps.google.com/?q=' + mallData.latitude + ',' + mallData.longitude
+            }
+
+            window.navigator['share'](shareData);
+        }
+    }
+
+
+    shareOutletDetails(outlet) {
+        if (window.navigator && window.navigator['share']) {
+            const shareData = {
+                title: this.mallDetails.mall.mall_name + ',' + outlet.outlet_name,
+                text: outlet.description,
+                url: 'https://maps.google.com/?q=' + this.mallDetails.latitude + ',' + this.mallDetails.longitude
+            }
+
+            window.navigator['share'](shareData);
+        }
+    }
+
     onScroll(event: any) {
         if (event.detail.scrollTop > 100) {
             this.show_top_bar = true;
@@ -39,7 +64,12 @@ export class MallDetailsPage implements OnInit {
     outletDetails(outlet: any) {
         this.router.navigate(['/outlet-details', {
 			outlet: JSON.stringify(outlet),
-			mallId: this.mallDetails.mall.mall_id
+            mallId: this.mallDetails.mall.mall_id,
+            mallData: JSON.stringify({
+                title: this.mallDetails.mall.mall_name,
+                text: this.mallDetails.mall.description,
+                url: 'https://maps.google.com/?q=' + this.mallDetails.latitude + ',' + this.mallDetails.longitude
+            })
 		}]);
     }
 

src/app/malls/malls.page.html

@@ -46,11 +46,11 @@
     </div>
 
     <ion-list lines="none" class="result-list">
-        <ion-item *ngFor="let mallData of tempMalls" (click)="showMallDetails(mallData)">
+        <ion-item *ngFor="let mallData of tempMalls">
             <img src="{{ mallData.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 (click)="showMallDetails(mallData)"> {{ mallData.mall.mall_name }}  <ion-icon 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">
                         <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
@@ -68,7 +68,7 @@
                     </div>
 
                     <div class="container">
-                        <button class="utility-button">
+                        <button class="utility-button" (click)="shareMallDetails(mallData)">
                             <ion-icon name="share"></ion-icon>
                         </button>
                         <a class="utility-button" target="_blank"

src/app/malls/malls.page.ts

@@ -60,6 +60,18 @@ export class MallsPage implements OnInit {
         }
     }
 
+    shareMallDetails(mallData) {
+        if (window.navigator && window.navigator['share']) {
+            const shareData = {
+                title: mallData.mall.mall_name,
+                text: mallData.mall.description,
+                url: 'https://maps.google.com/?q=' + mallData.latitude + ',' + mallData.longitude
+            }
+
+            window.navigator['share'](shareData);
+        }
+    }
+
     getMallsByLocation() {
         if (navigator.geolocation) {
             this.toastService.presentToast("Getting malls based on your location...", "dark");

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

@@ -17,7 +17,7 @@
 			<button [ngClass]="{'active' : outlet_details.is_bookmarked }">
 				<ion-icon name="bookmark"></ion-icon>
 			</button>
-			<button>
+			<button (click)="shareOutletDetails()">
 				<ion-icon name="share"></ion-icon>
 			</button>
 		</div>
@@ -35,7 +35,7 @@
 				<button [ngClass]="{'active' : outlet_details.is_bookmarked }" (click)="toggleBookmark()">
 					<ion-icon name="bookmark"></ion-icon>
 				</button>
-				<button>
+				<button (click)="shareOutletDetails()">
 					<ion-icon name="share"></ion-icon>
 				</button>
 			</div>

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

@@ -32,6 +32,18 @@ export class OutletDetailsPage implements OnInit {
 
     ngOnInit() { }
 
+    shareOutletDetails() {
+        if (window.navigator && window.navigator['share']) {
+            const shareData = {
+                title: JSON.parse(this.route.snapshot.paramMap.get('mallData')).title + ',' + this.outlet_details.outlet_name,
+                text: this.outlet_details.description,
+                url: JSON.parse(this.route.snapshot.paramMap.get('mallData')).url
+            }
+
+            window.navigator['share'](shareData);
+        }
+    }
+
     getFormatterDateTime(date: any, format: string) {
         return moment(date).format(format);
     }