An Ionic Angular Component

product-detail.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Details</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>{{product.prod_name}}</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-item>
        <p>Price:</p>
        <p>{{product.prod_price | currency}}</p>
      </ion-item>
      <ion-item>
        <p>Description:</p>
        <p>{{product.prod_desc}}</p>
      </ion-item>
      <ion-button type="button" shape="round" color="primary" expand="block" href="/tabs/(edit:{{product._id}})">Edit</ion-button>
      <ion-button type="button" shape="round" color="danger" expand="block" (click)="delete(product._id)">Delete</ion-button>
    </ion-card-content>
  </ion-card>
</ion-content>

product-detail.page.ts

import { Component, OnInit } from '@angular/core';
import { LoadingController, AlertController } from '@ionic/angular';
import { ApiService } from '../api.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Product } from '../product';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.page.html',
  styleUrls: ['./product-detail.page.scss'],
})
export class ProductDetailPage implements OnInit {

  product:Product = { _id: null, prod_name: '', prod_desc: '', prod_price: null, updated_at: null };

  constructor(public api: ApiService,
    public loadingController: LoadingController,
    public alertController: AlertController,
    public route: ActivatedRoute,
    public router: Router) {}

  ngOnInit() {
    this.getProduct();
  }

  async getProduct() {
    if(this.route.snapshot.paramMap.get('id') == 'null') {
      this.presentAlertConfirm('You are not choosing an item from the list');
    } else {
      const loading = await this.loadingController.create({
        message: 'Loading...'
      });
      await loading.present();
      await this.api.getProduct(this.route.snapshot.paramMap.get('id'))
        .subscribe(res => {
          console.log(res);
          this.product = res;
          loading.dismiss();
        }, err => {
          console.log(err);
          loading.dismiss();
        });
    }
  }

  async delete(id) {
    const loading = await this.loadingController.create({
      message: 'Loading...'
    });
    await loading.present();
    await this.api.deleteProduct(id)
      .subscribe(res => {
        loading.dismiss();
        this.router.navigate([ '/tabs', { outlets: { home: 'home' } } ]);
      }, err => {
        console.log(err);
        loading.dismiss();
      });
  }

  async presentAlertConfirm(msg: string) {
    const alert = await this.alertController.create({
      header: 'Warning!',
      message: msg,
      buttons: [
        {
          text: 'Okay',
          handler: () => {
            this.router.navigate(['']);
          }
        }
      ]
    });

    await alert.present();
  }
}