Angular 8 Material Dialog Close Button With X Top Right

angular 8 material dialog close button with X top right

<button class="close" mat-button (click)="onNoClick()">X</button>
<h1 mat-dialog-title>Login</h1>
<div mat-dialog-content>
...
...
</div>

CSS: (Please give it in global (styles.css) or give ViewEncapsulation.NONE or else these styles wont affect.)

.cdk-overlay-pane.my-dialog {
  position: relative!important;
}
.close.mat-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  line-height: 14px;
  min-width: auto;
}

Note that in the CSS We now have a new class out of thin air .my-dialog

So, please mention that as panelClass in dialogRef like below,

this.dialog.open(DialogComponent, {
      width: '250px',
      panelClass: 'my-dialog',
..
..

This yields me the following result,

How to Add Cancel Icon or Button Outside for Mat dialog

First your dialog container should be positioned to relative and x-button to absolution position. Then on x-button, set to top:0;right:0; and translate(100%,-100%).

It should position it as you want. See my stackblitz
https://stackblitz.com/edit/angular-e8aunf

Close button of MatDiaLog in Angular get error Cannot read property 'close' of null

You can use dialog.closeAll(), below is the changes you have to do in your code

here's an example

in my-dialog-content.component.html

<mat-dialog-content>
    my-dialog-content works!
</mat-dialog-content>

<mat-dialog-actions align="end">
    <ng-container ngProjectAs="btn-close">
    <button mat-button color="warn" (click)="dialog.closeAll()">Close</button>
  </ng-container>
    <button mat-button color="primary" type="submit" cdkFocusInitial>Submit</button>
</mat-dialog-actions>

and in my-dialog-content.component.ts

import {MatDialog} from '@angular/material';

export class MyDialogContentComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

} 

Updated Stackblitz

Usage of [mat-dialog-close]

Set your button to have disabled on it if the form is not valid. This way the button cannot be clicked unless the form is valid, meaning it won't close unless the form is valid

<button type="submit" (click)="addUser()" mat-dialog-close [disabled]="formisvalid" mat-button>Submit</button>

How to align button right inside Dialog angular material?

You can use the align HTML attribute:

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Demo

---

Note: The reason why setting an align="end" attribute works on the dialog's actions container is because the align attribute is used to add flexbox properties to the dialog actions in the dialog component's theming SCSS file:

(Extract of dialog.scss)

.mat-dialog-actions {
  // ...
  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }
}

Here's the source code.

Set a close icon in the top right on camera scanner using angular material

{
  position: absolute;
  right: 0;
  top: 0;
}

If it doesn't work try putting position:relative on mat-dialog-actions

How to add close icon in Material UI Dialog Header top right corner

Put the image icon in the title, and use the css to position it correctly, Try this:

Apply this css on close image:

let closeImg = {cursor:'pointer', float:'right', marginTop: '5px', width: '20px'};

<Dialog
    modal={false}
    open={true}
    title={
            <div>
                ABC 
                <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style={closeImg}/>
            </div>
        }
>
    Hello
</Dialog>

Check the working fiddle: https://jsfiddle.net/ve0qbgLr/

Button looks selected in Angular

Set autoFocus attribute to false

let dialogRef = this.dialog.open(DialogExample, {
    autoFocus: false,
    //other attributes
});

---

Related Topics