I've been struggling to implement a dialog window in my project, but for some reason, it's not working as expected. Rather than opening the dialog window, the content of the dialog component is being added at the bottom of the page like an HTML element without dimming the rest of the page. I'm just trying to create a simple dialog window and have followed similar examples on YouTube and official documents. I've checked the code multiple times but can't seem to find the mistake. Am I overlooking something?
Here is the code for the Dialog component:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Dialog HTML:
<p>
dialog works!
</p>
And here is the Main page component:
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { DialogComponent } from './Components/dialog/dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(public dialog: MatDialog) {
this.openDialog();
}
openDialog() {
const dialogRef = this.dialog.open(DialogComponent, {
width: '500px',
height: '1080px'
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
}
Also, don't forget to check the app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DialogComponent } from './Components/dialog/dialog.component';
import { MatDialogModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
DialogComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
MatDialogModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [
DialogComponent
],
})
export class AppModule { }