How can I fix this error in Angular and output data to a PDF?

Question

I'm trying to output data to a PDF with a button in a modal that is also displaying the same data. I have the data displaying in the modal with no issues, but I'm trying to create an option for the results to be downloaded to a PDF. I've been following a tutorial but currently receive an error in the console when loading my web application

core.js:6479 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef -> MatDialogRef]: 
  NullInjectorError: No provider for MatDialogRef!
NullInjectorError: R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef -> MatDialogRef]: 
  NullInjectorError: No provider for MatDialogRef!

I have a separate component just for holding the data and markup of the modal so that's where I'm also trying to implement the ability for a PDF option as well, in my auth-layout.component.ts

Here's my auth.component.html

<h2 mat-dialog-title>Order Summary</h2>
<div mat-dialog-content id="output" id="output">
  <div>
    <strong>Menu items:</strong>
    <tr *ngFor="let item of invoice.serviceItems">
      &nbsp;{{ item.serviceName }} ({{item.servicePrice | currency}})
    </tr>
    <br /> Subtotal: {{ invoice.getTotal() | currency }}
  </div>
  <hr />
  <p>
    Labor Cost: {{ invoice.getLaborTotal() | currency }}
  </p>
  <hr />
  <p style="font-weight: bold;">Invoice total: {{ invoice.getInvoice() | currency }}</p>
</div>
<div mat-dialog-actions align="end">
  <button mat-raised-button matDialogClose="cancel" color="primary">Cancel order</button>
  <button mat-raised-button matDialogClose="confirm" color="accent" (click)="openPDF()">Confirm order</button>
</div>

and here's the auth-layout.component.ts

import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogModule} from '@angular/material/dialog';
import { Component, OnInit, Input, ElementRef, ViewChild, Inject } from '@angular/core';
import { Invoice } from '../invoice';

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

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

  invoice: Invoice;
  @ViewChild("output", {
    static: true
  }) output: ElementRef;


  constructor(private dialogRef: MatDialogRef < AuthLayoutComponent > , @Inject(MAT_DIALOG_DATA) data: any) {
    this.invoice = data.invoice;
    console.log(this.invoice);
  }

  openPDF() {
    const data = this.output.nativeElement;
    const doc: jsPDF = new jsPDF("p", "mm", "a4");
    doc.html(data, {
      callback: (doc) => {
        doc.output("dataurlnewwindow");
      }
    });
  }

  ngOnInit(): void {}
}

my services.component.ts as well, where i actually open the modal

import { Observable } from 'rxjs';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { ServiceHelper } from '../services.service';
import { ServiceItem } from '../services.interface';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import {MatSnackBar} from '@angular/material/snack-bar';
import { FormsModule } from '@angular/forms';
import { Invoice } from '../invoice';
import { AuthLayoutComponent } from './../auth-layout/auth-layout.component';
import { jsPDF } from "jspdf";
import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: ['./services.component.css']
})

export class ServicesComponent {

  @ViewChild("output", {
    static: true
  }) output: ElementRef;


  serviceItems: ServiceItem[];
  invoice: Invoice; //from invoice.ts

  constructor(private dialog: MatDialog, private serviceHelper: ServiceHelper, private _snackBar: MatSnackBar) {

    this.invoice = new Invoice();
    this.serviceItems = serviceHelper.getServices();
  }

  clearInvoice(): void {
    /**
     * Iterate over the beverages array and set each objects checked property to false.
     */
    for (let service of this.serviceItems) {
      service.checked = false;
    }

    this.invoice = new Invoice(); // return a new instance of the Bill object.
  }


  openSnackBar(message: string) {
    this._snackBar.open(message + " was added!");
  }

  //Opens modal with calculated results
  submit() {

    console.log(this.serviceItems)


    for (let item of this.serviceItems) {
      if (item.checked) {
        this.invoice.addServiceItem(item);
      }
    }

    console.log(this.invoice.serviceItems);
    console.log(this.invoice.getTotal());

    const dialogRef = this.dialog.open(AuthLayoutComponent, {
      data: {
        invoice: this.invoice
      },
      disableClose: true,
      width: '800px'
    })


    dialogRef.afterClosed().subscribe(result => {
      if (result === 'confirm') {
        alert('Your order has been processed!');
        this.clearInvoice();
      } else {
        alert('Your order has been canceled.');
        this.clearInvoice();
      }
    })

  }
}

Answer 1

did you add MatDialogModule to your app.module.ts?

it should look something like this

import {MatDialogModule} from '@angular/material/dialog';

@NgModule({
  ...
  imports: [
    ...
    MatDialogModule
    ...
  ]
})

export class AppModule {}

https://material.angular.io/components/dialog/api