Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to position angular material(2.x +) dialog to right hand side of the screen on button click or on hover

I've started learning Angular 5 with material design, my requirement is I have to show angular material dialog fixed to right hand side of the screen always. By default it is coming always on the center of the screen. How can import show dialog on right hand side of the screen? Please help.

import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } 
  from '@angular/material';

My HTML:

<div class="add-contact-btn" fxFlex="10">
  <button mat-raised-button (click)="openDialog()">add contact</button>
</div>
openDialog(): void {
  const dialogRef = this.dialog.open(ContactsComponent, {
    width: '250px'   
  });
  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}
like image 727
Shaik Habeeb Avatar asked Mar 05 '18 10:03

Shaik Habeeb


People also ask

What is MatDialog in angular?

MatDialog creates modal dialogs that implements the ARIA role="dialog" pattern by default. You can change the dialog's role to alertdialog via MatDialogConfig . You should provide an accessible label to this root dialog element by setting the ariaLabel or ariaLabelledBy properties of MatDialogConfig .

How do you increase the size of dialog box in angular materials?

use updateSize() in any function in dialog component. it will change dialog size automatically.


2 Answers

I had a similar requirement for my app. I re-used your code to demonstrate how I did it. With this way I was able to show the dialog right at the position I clicked.

HTML:

<div class="add-contact-btn" fxFlex="10">
  <button mat-raised-button (click)="openDialog($event)">add contact</button>
</div>

Script:

openDialog(event): void {
  const dialogPosition: DialogPosition = {
    top: event.y + 'px',
    left: event.x + 'px'
  };

  const dialogRef = this.dialog.open(ContactsComponent, {
    width: '250px',
    position: dialogPosition
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}
like image 163
vipa Avatar answered Oct 05 '22 01:10

vipa


Try this

const dialogRef = this.dialog.open(ContactsComponent, {
  width: '250px'
  position: { right: '0'}
});

You can also add top: 0 etc.

like image 22
Eray T Avatar answered Oct 05 '22 01:10

Eray T