Snack Bar

공식문서 snack-bar

Snack Bar Position 변경

기본은 밑에서 처리되는 것이지만 verticalPosition 을 이용하여 포지션을 변경 할 수 있습니다.

import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
..........

export class AppComponent implements OnInit  {
  constructor(
    private snackBar: MatSnackBar
  ) {
    // TODO
  }

  ngOnInit() {

    //#region Initializing the popup control (Material Snack Bar)
    const snackBarConfig = new MatSnackBarConfig();
    snackBarConfig.verticalPosition = 'top';   // Positioning the snack bar popup
    snackBarConfig.duration = 6000;   // Snack bar popup display duration
    snackBarConfig.panelClass = ['error'];   // Snack bar popup applied class for styling
    //#endregion

    const message = '메시지 입력';
    this.snackBar.open(message, 'X', snackBarConfig);   // open up a message popup!

  }
}