title: how to position angular material(2.x +) dialog to right hand side of the screen on button click or on hover
body: <p>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.</p>
  <pre><code>import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } 
    from '@angular/material';
  </code></pre>
  <p>My HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;add-contact-btn&quot; fxFlex=&quot;10&quot;&gt;
    &lt;button mat-raised-button (click)=&quot;openDialog()&quot;&gt;add contact&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>openDialog(): void {
    const dialogRef = this.dialog.open(ContactsComponent, {
      width: '250px'   
    });
    dialogRef.afterClosed().subscribe(result =&gt; {
      console.log('The dialog was closed');
    });
  }
  </code></pre>