Not getting popup in angular6 project - angular6

Question

I am doing project in angular6. I have put "openModal" button. After clicking on that button popup need to be show. But I am not getting popup. But data which suppose to display on popup will getting display on same page. I am not getting where I have done mistake. Please anyone help me to find, where I have done mistake.
Here I have attached screenshot of output which I am getting.
https://imgur.com/Qjiy7jy
Here is my code
app.component.html
<button (click)="openModal()">Open Dialog</button>
app.component.ts
import { Component } from '#angular/core';
import { MatDialog, MatDialogConfig } from '#angular/material';
import { MyDialogComponent } from './my-dialog/my-dialog.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(public dialog: MatDialog) { }
openModal() {
console.log("calling");
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
id: 1,
title: 'Angular For Beginners'
};
const dialogRef = this.dialog.open(MyDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(result => {
alert("response: " + result)
});
}
}
my-dialog.component.html
<p>
my-dialog works!
</p>
my-dialog.component.ts
import { Component, Inject } from '#angular/core';
import { MAT_DIALOG_DATA } from '#angular/material';
import {MatSelectModule} from '#angular/material/select';
import {FormControl, Validators} from '#angular/forms';
import {MatInputModule} from '#angular/material'
export interface Staff {
name: string;
}
#Component({
selector: 'app-my-dialog',
templateUrl: './my-dialog.component.html',
styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent {
modalTitle: string;
constructor(#Inject(MAT_DIALOG_DATA) public data: any) {
this.modalTitle = data.title;
console.log(data)
}
staffControl = new FormControl('', [Validators.required]);
selectFormControl = new FormControl('', Validators.required);
}

Answer 1

add in your module
entrycomponent:[yourdailogComponent]
and import css in your style.css
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
openHashTagDialog() {
const dialogRef = this.dialog.open(AddHashTagdialogComponent, {
data: '',
width: '400px'
});
dialogRef.afterClosed().subscribe(result => {
this.fetchHashTagsList();
});
}