Angular material dialog component hides all my website components

Question

I\'m using angular 5 and angular material (latest version) and I\'m trying to open a dialog from a page. When I click the button that triggers the opening, the entire website is

Answer 1

See the API Docs for MatDialogConfig. You can set hasBackdrop to false.

    const dialogRef = this.dialog.open(DialogComponent, {
        width: '250px',
        data: { name: 'Juan Manuel', animal: 'Perro' },
        hasBackdrop: false
    });