Material angular 7 – SnackBar

La<MatSnackBar>,, una Directiva Angular, se utiliza para mostrar una barra de notificación que se muestra en los dispositivos móviles como una alternativa a los diálogos/populares.

En este capítulo, mostraremos la configuración necesaria para mostrar un snack bar utilizando Material Angular.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatButtonModule,MatSnackBarModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ {@angular/forms
   declaraciones:[AppComponent],
   importaciones:[BrowserModule,BrowserAnimationsModule,MatButtonModule,MatSnackBarModule,FormsModule,ReactiveFormsModule],
   proveedores:[],
   bootstrap:[AppComponent]})exportclassAppModule{}

)

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

mat-button (click)="openSnackBar(Party, act)">Mostrar snack-bar

A continuación se muestra el contenido del archivo ts modificado app.component.ts .

importar{Componente,Inyectable}desde@angular/core;importar{MatSnackBar}desde"@angular/material";@Componente({
   selector:app-root,
   templateUrl:app.component.html,
   styleUrls:[app.component.css]})exportclassAppComponent{constructor(public snackBar:MatSnackBar){})
   openSnackBar(message:string, action:string){this.snackBar.open(message, action,{
         duración:2000,});}}

Resultado

Verifique el resultado.

Detalles

  • Aquí, hemos creado un botón usando el botón mat en cuyo clic mostramos el snack bar.