CODEWITHSUNDEEP
angularangular-materialangular-universal
beachCode
beachCode

Reputation: 3510

Angular Universal MatDialog appears empty and buttons don't work

I have ported an Angular Material 5 app over to Angular Universal, and I have an intermittent issue with a MatDialog that I'm using. When it opens, there's no title or content. Only the OK and Cancel buttons appear, and they don't work.

MatDialog appears empty

I'm using a service to create the dialog. Here's the code.

import { Observable } from 'rxjs/Observable';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { Injectable } from '@angular/core';

import { AppConfirmComponent } from './app-confirm.component';

@Injectable()
export class AppConfirmService {

  constructor(private dialogRef: MatDialog) { }

  public confirm(title: string, message: string, id: string): Observable<boolean> {
    const idCancel = id + '-cancel';
    let dialogRef: MatDialogRef<AppConfirmComponent>;
    dialogRef = this.dialogRef.open(AppConfirmComponent, {
      width: '300px',
      disableClose: true,
      data: {title, message, id, idCancel}
    });
    return dialogRef.afterClosed();
  }
}

And the component:

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

@Component({
  selector: 'app-confirm',
  template: `<h1 matDialogTitle>{{ data.title }}</h1>
    <div mat-dialog-content>{{ data.message }}</div>
    <div mat-dialog-actions>
      <button id="{{ data.id }}" type="button" mat-raised-button color="primary"
        (click)="dialogRef.close(true)">OK</button> &nbsp;
      <span fxFlex></span>
      <button id="{{ data.idCancel }}" type="button" color="accent" mat-raised-button
        (click)="dialogRef.close(false)">Cancel</button>
    </div>`,
})
export class AppConfirmComponent {
  constructor(
    public dialogRef: MatDialogRef<AppConfirmComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}

Upvotes: 2

Views: 1363

Answers (1)

beachCode
beachCode

Reputation: 3510

It appears this issue was caused by calling:

this.changeRef.detectChanges();

UPDATE: Upon further investigation, I have found that trying to create the dialog as a service causes the issue. If I create the dialog in the component that's using it, there is no problem.

Upvotes: 1

Related Questions