I am using Angular material dialog below is code I have written to open dialog wherein I am passing configurations:
component.ts
let dialogBoxSettings = {
height: '300px',
width: '500px',
disableClose: true,
hasBackdrop: true,
data: mission.config
};
const dialogRef = this.dialog.open(
DialogBoxComponent,
dialogBoxSettings
);
I have passed width and height to dialog box but when I resize my browser window the dialog shifts to left side of window.
dialog-box.component.ts:
import { Component, Inject, OnInit,HostListener } from "@angular/core";
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { Subscription } from "rxjs/Subscription";
declare let jQuery: any;
@Component({
selector: "dialog-box",
templateUrl: "./dialog-box.component.html",
styleUrls: ["./dialog-box.component.css"]
})
export class DialogBoxWidgetComponent implements OnInit {
title: string = "Title";
heading: string = "Heading";
type: string = "userInput;";
buttons: any;
public dialogConfig: any;
subscription: Subscription;
constructor(
public dialogRef: MatDialogRef<DialogBoxWidgetComponent>,
@Inject(MAT_DIALOG_DATA) private data: any
) {}
closeDialog() {
jQuery(".close").trigger("click");
}
ngOnInit() {
this.dialogConfig = this.data;
this.title = this.dialogConfig.title;
this.heading = this.dialogConfig.heading;
this.type = this.dialogConfig.type;
this.buttons = this.dialogConfig.buttons;
jQuery(".cdk-overlay-container").css("z-index", 99999);
jQuery(".mat-dialog-container").css({
"border-radius": "7px"
});
}
}
dialog-box.component.html
<h1 matDialogTitle>{{title}}</h1>
<div (click)="closeDialog()" style="position: relative;">
<button class="close" mat-dialog-close></button>
</div>
<div mat-dialog-content>{{heading}}</div>
<div mat-dialog-actions *ngIf="type == 'userInput'">
<button *ngFor="let item of buttons" [ngClass]="item.type=='button'?'mat-dialog-btn':'mat-dilalog-btn-link'" mat-button matDialogClose="{{item.value}}">{{item.name}}</button>
</div>
What is wrong with my implementation? If I do not give width and height to dialog then it adjust fine when I resize window.
The MatDialogRef provides a handle on the opened dialog. It can be used to close the dialog and to receive notifications when the dialog has been closed. Any notification Observables will complete when the dialog closes. dialogRef. afterClosed().
use updateSize() in any function in dialog component. it will change dialog size automatically.
Approach: First we need to import 'MatDialog' from '@angular/material/dialog' and we need to create an instance for it in the constructor. Using this instance we can open the dialog box component. Now create a separate component for the dialog and write code as per the requirements.
To achieve responsiveness, we can use panelClass in MatDialogconfig
Add the following in global style
.dialog-responsive {
width: 40%;
}
@media only screen and (max-width: 760px) {
.dialog-responsive {
width: 100%;
}
}
And include this class in your config where you want to open dialog
let config: MatDialogConfig = {
panelClass: "dialog-responsive"
}
let dialogRef = this.dialog.open(InviteStudentComponent, config);
you can try by adding margin: 0 auto;
to your dialog setting:
let dialogBoxSettings = {
height: '300px',
width: '500px',
margin: '0 auto',
disableClose: true,
hasBackdrop: true,
data: mission.config
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With