How to pass object id to angular material dialog

Today, I met a problem with passing object(customer) id to angular modal. In the beginning, I was passing customer id to another component like:

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

and after this, I was redirecting to another component with customer details. Everything that’s I want to archive is passed id to modal component and print customer details in this particular modal without redirecting to another component.

customer details:

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

customer-single.component.ts

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);
  }

}

customer-list.component.html

<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(customer.id)">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>

customer-list.component.ts

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(customerId: number) {
    const dialog = this.dialog.open(CustomerDetailsDialog, {
        data: {
          id: this.customerDetails$
        }
      }
    );

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

}

Additionally, I created a modal directory for modal components.

customer-details-dialog.ts looks like:

@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,
              @Inject(MAT_DIALOG_DATA) public data: CustomerDetails) {
  }

  ngOnInit() {

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

}

customer-details-dialog.html looks like:

<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>

After clicking on the details button I am receiving:
Loading stuff in ngIf... in modal window because particular information about the customer is not loaded and we are trying to load #loading component because we can not receive id from the object.

Moreover, in the console, I am receiving:

GET http://localhost:8080/api/customer/undefined 400

Thanks in advance for the help.

Source: New feed