”;
The <MatSnackBar>, an Angular Directive, is used to show a notification bar to show on mobile devices as an alternative of dialogs/popups.
In this chapter, we will showcase the configuration required to show a snack bar using Angular Material.
Following is the content of the modified module descriptor app.module.ts.
import { BrowserModule } from ''@angular/platform-browser''; import { NgModule } from ''@angular/core''; import { AppComponent } from ''./app.component''; import {BrowserAnimationsModule} from ''@angular/platform-browser/animations''; import {MatButtonModule,MatSnackBarModule} from ''@angular/material'' import {FormsModule, ReactiveFormsModule} from ''@angular/forms''; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule,MatSnackBarModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Following is the content of the modified HTML host file app.component.html.
<button mat-button (click)="openSnackBar(''Party'', ''act'')">Show snack-bar</button>
Following is the content of the modified ts file app.component.ts.
import {Component, Injectable} from ''@angular/core''; import { MatSnackBar } from "@angular/material"; @Component({ selector: ''app-root'', templateUrl: ''app.component.html'', styleUrls: [''app.component.css''] }) export class AppComponent { constructor(public snackBar: MatSnackBar) {} openSnackBar(message: string, action: string) { this.snackBar.open(message, action, { duration: 2000, }); } }
Result
Verify the result.
Details
- Here, we”ve created a button using mat-button on whose click we shows the snack bar.
Advertisements
”;