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 de la Snak Bar en Angular
Verifique el resultado.
Detalles Snack Bar
- Aquí, hemos creado un botón usando el botón mat en cuyo clic mostramos el snack bar.