Detail Page

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';

import { CityDTO, CityResourceService } from 'aig-standard';
import { AigGenericComponentService } from 'app/main/api-gest-console/generic-component/generic-component.service';

import { GenericComponent } from 'app/main/api-gest-console/generic-component/generic-component';
import { AigCityNewUpdateModalComponent } from '../city-new-update-modal/city-new-update-modal.component';
import { MatSnackBar } from '@angular/material';
import { FuseProgressBarService } from '@fuse/components/progress-bar/progress-bar.service';

@Component({
    templateUrl: './city-detail-page.component.html',
    styleUrls: ['./city-detail-page.component.scss']
})
export class AigCityDetailPageComponent extends GenericComponent {
    constructor(
        private _snackBar: MatSnackBar,
        private router: Router,
        private _fuseProgressBarService: FuseProgressBarService,
        private cityResourceService: CityResourceService,
        private route: ActivatedRoute,
        private dialog: MatDialog,
        aigGenericComponentService: AigGenericComponentService,
        ) { super(aigGenericComponentService) }


    city: CityDTO;
    
    async loadComponent() {
        if(this.firstLoad) {
            this.city = this.route.snapshot.data.city;
        } else {
            this.city = await this.cityResourceService.getCityUsingGET(this.city.id).toPromise();
        }
    }

    async deleteCity(id: number) {
        this._fuseProgressBarService.show();
    
        try {
            await this.cityResourceService.deleteCityUsingDELETE(id).toPromise();
    
            this._snackBar.open(`City: '${id}' deleted.`, null, { duration: 2000, });
            
            this.router.navigate(['/s6d', 'city']);
        } catch (e) {
            this._snackBar.open(`Error during deleting city: '${id}'. (${e.message})`, null, { duration: 5000, });
        }
        this._fuseProgressBarService.hide();
      }
    
    editCity(city: CityDTO) {
        this.dialog.open(AigCityNewUpdateModalComponent, { data: { city: city } });
    }

}

<div id="aig-city-detail-page" class="page-layout blank">
    <aig-standard-header [sectionName]="city.name" [search]="false"></aig-standard-header>
    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="start" fxLayoutAlign.gt-sm="start start">
        <div class="widget p-16" fxFlex.gt-sm="50">
            <div class="fuse-card auto-width p-16">
               

               <entity-detail-city [city]="city"></entity-detail-city>

                <button mat-stroked-button color="primary" (click)="editCity(city)">Edit</button>
                <button mat-stroked-button color="primary" (click)="deleteCity(city.id)">Delete </button>
            </div>
        </div>
    </div>
</div>