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.