Angular MatDialog 'bootstrap' not showing right or missing

Question

I am using Angular MatDialog. I have issue with it, not showing right and with the styles, backdrop, etc.. I have

import { MatDialog, MatDialogConfig } from '@angular/material/dialog';

and also in app.module:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { MatDialogModule } from '@angular/material/dialog';

Is my project missing some dependencies? I have @angular/material 9.1.3, @angular/animations 9.1.3 already in my package.json

Answer 1

I found my problem, I was not setting a default angular material theme in my styles.scss file such as:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

or a custom theme as described here: https://material.angular.io/guide/getting-started#step-4-include-a-theme

Answer 2

from angular material theming guide :

If you're using Angular CLI, this is as simple as including one line in your styles.css file:

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Alternatively, you can just reference the file directly. This would look something like:

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">