How can i align Snackbar?

Question

I created Snackbar using material 2(below i have added demo) .I have one button in main page when i click that button it showing message(snackbar) in bottom of the page . i want to change this(snackbar message) into top right corner of the page. how can i do this ?? need help

Demo

Html

<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Pizza party
</button>

component.ts

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message="DOne", action = '') {
          this.snackBar.open(message, action, {
          duration: 5000,

        });
  }
}

Answer 1

An alternative way to do it is by specifying the verticalPosition and horizontalPosition configuration options of MatSnackBarConfig, which is passed via the config argument in MatSnackBar#open.

Here's an example:

openSnackBar(message: string, action?: string) {
    this.snackbar.open(message, action ? action : undefined, {verticalPosition: 'top', horizontalPosition: 'end'});
}

From the docs, only two values for the verticalPosition are allowed: 'top' and 'bottom'.

For horizontalPosition, 'start', 'center', 'end', 'left' and 'right'.

Here's an updated demo

Answer 2

here is some updated CSS which will help you to show snack bar on the top left.

for more effect have a look here

https://stackblitz.com/edit/angular-mbgkfv-amqfpy?file=styles.css

here is your updated stackblitz which will reload the page after 5s.

https://stackblitz.com/edit/angular-mbgkfv-nc6bk6?file=app/snack-bar-component-example.ts