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

<ion-content>
    
    <div class="header-bar">
        <div class="heading-holder">
            <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
            <h3> Bookmarked Malls / Outlets </h3>
        </div>
    </div>

    <div class="results-utilities-holder">
        <h5 *ngIf="tempMalls"> {{ tempMalls.length }} MALLS </h5>
    </div>

    <ion-list lines="none" class="result-list">
        <ng-container *ngFor="let mallData of tempMalls;">
            <ion-item *ngIf="mallData.mall.outlet && mallData.mall.outlet.length > 0">
                <img src="{{ mallData.mall.image_url }}" slot="start">
                <ion-label>
                    <h3> 
                        <span (click)="showMallDetails(mallData)"> {{ mallData.mall.mall_name }} </span>  
                        <ion-icon (click)="toggleMallBookmark(mallData)" 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>
                            Offers: <strong> {{ mallData.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 }}
                            </div>
                            <div class="utility">
                                <ion-icon name="pin"></ion-icon> {{ mallData.mall.mall_distance }} km
                            </div>
                        </div>
    
                        <div class="container">
                            <button class="utility-button" (click)="shareMallDetails(mallData)">
                                <ion-icon name="share"></ion-icon>
                            </button>
                            <a class="utility-button" target="_blank"
                            href="https://maps.google.com/?q={{ mallData.latitude }},{{ mallData.longitude }}">
                                <ion-icon name="navigate"></ion-icon>
                            </a>
                        </div>
                    </div>
                </ion-label>
            </ion-item>
        </ng-container>        
    </ion-list>

</ion-content>