I've encountered an issue with the Mat-Dialog where it opens up on the left side of the page instead of centered.
I made sure to follow the steps outlined on the official Angular Material website here
TS
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from '../shared/dialog/dialog.component';
@Component({
selector: 'header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent {
constructor(public dialog: MatDialog) {}
signin(): void {
this.dialog.open(DialogComponent);
}
}
Dialog TS
import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {
constructor(public dialogRef: MatDialogRef<DialogComponent>) {}
ngOnInit(): void {
console.log('dialog');
}
}
AppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { BodyComponent } from './body/body.component';
import { DialogComponent } from './shared/dialog/dialog.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
BodyComponent,
DialogComponent
],
exports: [MatDialogModule],
imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
entryComponents: [DialogComponent],
providers: [
{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true } }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Is there a mistake in my approach to implementing this feature?