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.
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.
Display Output In below Video.