0

I want to show a specific device data when i open the dialog, but first, i need to pass the device.key from my Component to the Dialog Component and then run the service that'll get the device data, let me show you the code:

list-device.html:

  <ng-container matColumnDef="info">
    <th mat-header-cell *matHeaderCellDef><strong>Details</strong></th>
    <td mat-cell *matCellDef="let device; let i = index;">
      <button mat-mini-fab (click)="openDialog(device.key)" style="background-color: darkcyan;">
        <mat-icon>info</mat-icon>
      </button>
    </td>
  </ng-container>

list-device.ts:

  openDialog(id: string){
    this.dialog.open(ListDialogComponent)
    console.log(id)
  }

list-device-dialog.ts:

  dataSource: any = [];

  constructor(
    public fb: FormBuilder,
    private location: Location,
    private deviceService: DeviceService,
    private actRoute: ActivatedRoute,
    private router: Router
  ) {
    this.deviceService.GetDevice(**the device key**).valueChanges().subscribe(data => {
      console.log(data);
      this.dataSource.push(data)
    })
  }
Fire Zero
  • 3
  • 4

1 Answers1

0
openDialog(id: string){
  this.dialog.open(ListDialogComponent, {
      data: {id: id}
    });
  }

In a dialog component

import library

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

then inject it in constructor,

 constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

here you can see value of => this.data

gaurav_thakkar
  • 127
  • 4
  • I'm getting the following error: `ERROR NullInjectorError: StaticInjectorError(AppModule)[ListComponent -> ListDialogComponent]: StaticInjectorError(Platform: core)[ListComponent -> ListDialogComponent]: NullInjectorError: No provider for ListDialogComponent!` – Fire Zero Mar 12 '20 at 13:21
  • please check - https://stackoverflow.com/questions/47270324/nullinjectorerror-no-provider-for-matdialogref – gaurav_thakkar Mar 12 '20 at 13:30