CODEWITHSUNDEEP
angularangular5angular-material2
Shaik Habeeb
Shaik Habeeb

Reputation: 215

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');
  });
}

Upvotes: 10

Views: 18737

Answers (2)

Eray T
Eray T

Reputation: 777

Try this

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

You can also add top: 0 etc.

Upvotes: 11

vipa
vipa

Reputation: 389

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');
  });
}

Upvotes: 14

Related Questions