Angular MatDialog appends to HTML instead of showing as a popup

Question

I am following on an Angular MatDialog tutorial on Youtube(https://www.youtube.com/watch?v=xJJ_NDqvuCk) and did exactly the same as instructed. However, the popup seems not working properly. how can i make the popup shows in the middle of the screen instead of appending to the bottom of HTML

Answer 1

Did you import a theme?

Add the following line to styles.css/styles.scss/your main CSS file:

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