<a [routerLink]="['/customers/single', this.customer.id]"></a>

export interface CustomerDetails {
  id?: number;
  name: string;
  surname: string,
  email: string;
  phoneNumber: string;
  status: string;
  username: string;
}

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {CustomerService} from "../shared/customer.service";
import {Observable} from "rxjs";
import {CustomerDetails} from "../model/customer-details";

@Component({
  selector: 'app-customer-single',
  templateUrl: './customer-single.component.html',
  styleUrls: ['./customer-single.component.css']
})
export class CustomerSingleComponent implements OnInit {

  customer$: Observable<CustomerDetails>;
  customerDetails$: Observable<CustomerDetails>;
  customer: CustomerDetails;

  constructor(private customerService: CustomerService,
              private activatedRoute: ActivatedRoute,
              private router: Router) {
  }

  ngOnInit() {
    const id = this.activatedRoute.snapshot.params['id'];
    this.customer$ = this.customerService.getOne(id);
  }

  onPreDetailsCustomer() {
    const id = this.activatedRoute.snapshot.params['id'];
    this.customerDetails$ = this.customerService.getOne(id);
  }

}

<div>
  <table class="table" style="width: 90%">
    <thead class="table">
    <tr>
      <th scope="col">No.</th>
      <th scope="col" width="10%">Name</th>
      <th scope="col" width="10%">Surname</th>
      <th scope="col" width="10%">Phone number</th>
      <th scope="col" width="10%">Email</th>
      <th scope="col" width="10%">NIP</th>
      <th scope="col">&nbsp;</th>
      <th scope="col">&nbsp;</th>
      <th scope="col">&nbsp;</th>
      <th scope="col">&nbsp;</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let customer of ( customers$ | async ); let i = index">
      <td scope="row">{{i + 1}}</td>
      <td>{{customer.name}}</td>
      <td>{{customer.surname}}</td>
      <td>{{customer.phoneNumber}}</td>
      <td>{{customer.email}}</td>
      <td>{{customer.nip}}</td>
      <td>
        <a [routerLink]="['/customers/modify', customer.id]">
          <button mat-raised-button color="primary">Modify</button>
        </a>
          <button mat-raised-button color="accent" (click)="openDialog()">Details</button>
        <a (click)="onRemove(customer.id)">
          <button mat-raised-button color="warn">Remove</button>
        </a>
        <button type="button" class="btn btn-dark" routerLink="products">
          <span class="btn-label"><i class="fas fa-cart-plus"></i></span>Compose basket
        </button>
      </td>
    </tr>
    </tbody>
  </table>
</div>

import {Component, OnInit} from '@angular/core';
import {CustomerService} from "../shared/customer.service";
import {Customer} from '../model/customer';
import {ActivatedRoute, Router} from "@angular/router";
import {Observable} from "rxjs";
import {CustomerDetails} from "../model/customer-details";
import {CustomerDetailsDialog} from "../modal/customer-details/customer-details-dialog";
import {MatDialog} from "@angular/material";

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {

  customers$: Observable<Customer[]>;
  customerDetails$: Observable<CustomerDetails>;


  constructor(private customerService: CustomerService, private router: Router, private activatedRoute: ActivatedRoute, public dialog: MatDialog) {
  }

  ngOnInit() {
    this.customers$ = this.customerService.customersView();
  }

  onRemove(id: number) {
    this.customerService
    .remove(id)
    .subscribe(
      customer => console.log('Customer ' + customer + ' successfully removed'),
      error => console.log('Something went terribly wrong: ' + error.message),
      () => setTimeout(() => this.ngOnInit(), 150)
    );
  }

  onPreDetailsCustomer(id: number) {
    this.customerDetails$ = this.customerService.getOne(id);
  }

  openDialog() {
    const dialog = this.dialog.open(CustomerDetailsDialog);

    dialog.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

}

@Component({
  selector: 'customer-details-dialog',
  templateUrl: 'customer-details-dialog.html',
})
export class CustomerDetailsDialog {

  customer$: Observable<CustomerDetails>;

  constructor(public dialog: MatDialog,
              private customerService: CustomerService,
              private activatedRoute: ActivatedRoute,
              private router: Router) {
  }

  ngOnInit() {

    const id = this.activatedRoute.snapshot.params['id'];
    this.customer$ = this.customerService.getOne(id);
  }

}

<div *ngIf="(this.customer$ | async) as customer; else loading">
  {{customer.name}}
</div>

<div *ngIf="(this.customer$ | async) as customer; else loading">
  {{customer.email}}
</div>

<div *ngIf="(this.customer$ | async) as customer; else loading">
  {{customer.phoneNumber}}
</div>

<ng-template #loading>
  Loading stuff in ngIf...
</ng-template>