Snackbar Modal in Angualr

In My last article i discussed on how to implement bottom sheet Modal in our application using angular material. In these article I discuss on How to create Snackbar Modal using Angular material.
We need to use “MatSnackBar” Service displaying snack-bar notifications.
First we need to import “MatSnackBarModule” in app.module.ts file.


.................
//we need to import first MatSnackBarModule  From Material.
import {MatSnackBarModule} from '@angular/material/snack-bar';
...................
@NgModule({
  .........
  imports: [
                MatSnackBarModule,
            ...
           ]
})
export class AppModule(){}

Opening a snack-bar
Snack-bar contains message or Component.


// Basic Example with message. 
let snackBarRef = snackBar.open('Message Load.');
// Load component into the snack-bar.
let snackBarRef = snackbar.openFromComponent(MessageComponent);

MatSnackBarRef: It returns when open snack-bar initialize. We can use these reference to do some action.


//After Dismiss Snack-bar

snackBarRef.afterDismissed().subscribe(() => {
  console.log('The snack-bar was dismissed');
});

//Button click
snackBarRef.onAction().subscribe(() => {
  console.log('The snack-bar action was triggered!');
});

//Dismiss Snack-bar
snackBarRef.dismiss();

Basic Example Snackbar.

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

import {Component} from '@angular/core';
import {MatSnackBar} from '@angular/material';

@Component({
selector: 'snackbar-basic',
templateUrl: 'snackbar.html',
})
export class SnackBarComponent {
constructor(public snackBar: MatSnackBar) {}

openSnackBar() {
this.snackBar.open("This is sample",'', {
duration: 1000,
});
}
}

MatSnackBar Methods
1) dismiss : It dismisses the currently-visible snack bar.
2) open : It opens a snackbar with a message. It contains 3 Parameter called(message,action,config) and returns “MatSnackBarRef”.

3) openFromComponent : It use the custom component display. It contains 2 Parameters called(Component,config) and returns “MatSnackBarRef”.
4) openFromTemplate : It use the custom template display. It contains 2 Parameters called(Template,config) and returns “MatSnackBarRef”.

Below example using “MatSnackBarConfig” we can set position,duration,css of the snackbar.


import {Component} from '@angular/core';
import {
  MatSnackBar
  MatSnackBarConfig,
  MatSnackBarHorizontalPosition,
  MatSnackBarVerticalPosition,
} from '@angular/material';

@Component({
  selector: 'snack-bar-component-example',
  templateUrl: 'snack-bar-component-example.html',
})
export class SnackBarComponentExample {

   verticalPosition: MatSnackBarVerticalPosition = 'top';
  constructor(public snackBar: MatSnackBar) {}
 openSnackBar(vposition,hposition='') {

    let verticalPosition: MatSnackBarVerticalPosition = vposition;

    const config = new MatSnackBarConfig();
    config.verticalPosition = verticalPosition;
    if(hposition != ''){
      let horizontalPosition: MatSnackBarHorizontalPosition = hposition;
      config.horizontalPosition = horizontalPosition;
    }
    config.duration = 500;

    this.snackBar.openFromComponent(DisplaySnackbarComponent, config);
  }
 
}


@Component({
  selector: 'snackbar-display-example',
  templateUrl: 'snackbar-display-example.html',
  styles: [`
    .example-display-snackbar{
      color: hotpink;
    }
  `],
})
export class DisplaySnackbarComponent {}

<button mat-button (click)="openSnackBar('top')" aria-label="Show an example snack-bar">
Top Snack Bar
</button>

<button mat-button (click)="openSnackBar('top','right')" aria-label="Show an example snack-bar">
Top Snack Bar Right side
</button>

<button mat-button (click)="openSnackBar('top','left')" aria-label="Show an example snack-bar">
Top Snack Bar Left Side
</button>

<button mat-button (click)="openSnackBar('bottom')" aria-label="Show an example snack-bar">
Bottom Snack Bar
</button>

<button mat-button (click)="openSnackBar('bottom','right')" aria-label="Show an example snack-bar">
Bottom Snack Bar Right side
</button>

<button mat-button (click)="openSnackBar('bottom','left')" aria-label="Show an example snack-bar">
Bottom Snack Bar Left side
</button>

<span class="example-display-snackbar">
Snackbar Open
</span>

Display Output In below Video.

Spread the love

Education For Betterment

About The Author

Jugal Rana

Related Posts

About The Author