Ngx-Bootstrap - Alertes
Alertes fournit des messages contextuels pour les actions utilisateur typiques telles que les informations, les erreurs avec des messages d'alerte disponibles et flexibles.
AlertComponent
Affiche des panneaux de contenu pliables pour présenter des informations dans un espace limité.
sélecteur
alert,bs-alert
Contributions
dismissible - booléen, si défini, affiche un bouton "Fermer" en ligne, par défaut: faux
dismissOnTimeout- chaîne | nombre, nombre en millisecondes, après quoi l'alerte sera fermée
isOpen - booléen, l'alerte est-elle visible, par défaut: true
type- chaîne, type d'alerte. Fournit l'une des quatre classes contextuelles prises en charge par bootstrap: succès, info, avertissement et danger, par défaut: avertissement
Les sorties
onClose - Cet événement se déclenche immédiatement après l'appel de la méthode d'instance close, $ event est une instance du composant Alert.
onClosed - Cet événement se déclenche lorsque l'alerte est fermée, $ event est une instance du composant Alert
AlertConfig
Propriétés
dismissible - booléen, les alertes sont-elles rejetées par défaut, par défaut: false
dismissOnTimeout - nombre, temps par défaut avant que l'alerte ne se termine, par défaut: non défini
type - chaîne, type d'alerte par défaut, par défaut: avertissement
Exemple
Comme nous allons utiliser les alertes, nous devons mettre à jour app.module.ts utilisé dans le chapitre ngx-bootstrap Accordion pour utiliserAlertModule et AlertConfig.
Mettez à jour app.module.ts pour utiliser AlertModule et AlertConfig.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule, AlertConfig } from 'ngx-bootstrap/alert';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule,
AlertModule
],
providers: [AlertConfig],
bootstrap: [AppComponent]
})
export class AppModule { }
Mettez à jour test.component.html pour utiliser les alertes.
test.component.html
<alert type="success"
[dismissible]="dismissible"
[isOpen]="open"
(onClosed)="log($event)"
[dismissOnTimeout]="timeout">
<h4 class="alert-heading">Well done!</h4>
<p>Success Message</p>
</alert>
<alert type="info">
<strong>Heads up!</strong> Info
</alert>
<alert type="warning">
<strong>Warning!</strong> Warning
</alert>
<alert type="danger">
<strong>Oh snap!</strong> Error
</alert>
Mettez à jour test.component.ts pour les variables et méthodes correspondantes.
test.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
open: boolean = true;
dismissible: boolean = true;
timeout: number = 10000;
constructor() { }
ngOnInit(): void {
}
log(alert){
console.log('alert message closed');
}
}
Construire et servir
Exécutez la commande suivante pour démarrer le serveur angulaire.
ng serve
Une fois que le serveur est opérationnel. Ouvrez http: // localhost: 4200 et vérifiez la sortie suivante.