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.