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

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
    selector: 'app-mall-details',
    templateUrl: './mall-details.page.html',
    styleUrls: ['./mall-details.page.scss'],
})
export class MallDetailsPage implements OnInit {
    mallDetails: any;
    selected_tab: string = 'food';
    show_top_bar: boolean = false;
    show_sort_popup: boolean = false;
    selected_sort: string = null;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private location: Location
    ) { }

    ngOnInit() {
        this.mallDetails = JSON.parse(this.route.snapshot.paramMap.get('mall'));
    }

    back() {
        this.location.back();
    }

    onScroll(event: any) {
        if (event.detail.scrollTop > 100) {
            this.show_top_bar = true;
        } else {
            this.show_top_bar = false;
        }
    }

    outletDetails(outlet: any) {
        this.router.navigate(['/outlet-details', {
			outlet: JSON.stringify(outlet),
			mallId: this.mallDetails.mall.mall_id
		}]);
    }

    sortBy(type: string) {
        this.selected_sort = type;
        switch(this.selected_sort) {
            case 'name': this.mallDetails.mall.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.mallDetails.mall.outlet.sort(function(a: any, b: any){
                if(a.rating < b.rating) { return -1; }
                if(a.rating > b.rating) { return 1; }
                return 0;
            }).reverse();
            break;
        }
    }

    togglePopup() {
        this.show_sort_popup = !this.show_sort_popup;
    }

}