we_bstly-web/src/app/pages/services/services.component.ts

import { Component, OnInit } from '@angular/core';
import { Sort } from '@angular/material/sort';
import { ServiceService } from '../../services/service.service';
import { I18nService } from '../../services/i18n.service';

@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: [ './services.component.scss' ]
})
export class ServicesComponent implements OnInit {

  baseServices: Array<any>;
  serviceCategory: any = {};
  view = 'grid';

  constructor(private serviceService: ServiceService, private i18n: I18nService) { }

  ngOnInit(): void {

    this.view = 'grid';
    try {
      this.view = localStorage.getItem("bstly.servicesView") || this.view;
    } catch { }

    this.serviceService.services().subscribe({
      next: (data: Array<any>) => {
        let that = this;
        that.baseServices = [];
        data.forEach(function (service) {
          if (!service.category || service.category == "") {
            that.baseServices.push(service);
          } else {
            if (!that.serviceCategory[ service.category ]) {
              that.serviceCategory[ service.category ] = [];
            }
            that.serviceCategory[ service.category ].push(service);
          }
        })
      }
    })
  }

  updateView(): void {
    try {
      localStorage.setItem("bstly.servicesView", this.view);
    } catch { }
  }

}