Afficher un toast en Angular

Il est important de prévenir l'utilisateur lorsqu'il a réalisé une action importante comme la validation d'un formulaire ou lorsqu'une erreur a eu lieu.

Nous utiliserons pour ça le package "ngx-toastr" qui est le plus simple à utiliser.

Installation de ngx-toastr

Nous devons d'abord installer le package NPM dans notre projet Angular. Il est important de choisir la version du package qui correspond à votre version d'Angular.

npm install ngx-toastr --save

Pour importer le style de "ngx-toastr" nous avons deux options. Soit l'ajouter dans le fichier angular.json, soit l'importer dans un fichier SCSS.

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css"
]

Fichier angular.json

@import '~ngx-toastr/toastr';

Fichier styles.

Enfin nous devons importer le ToastrModule et le BrowserAnimationsModule à dans notre module Angular.

@NgModule({
  imports: [
  	// ...
  	BrowserAnimationsModule,
  	ToastrModule.forRoot()
  ],
  // ...
})
export class AppModule { }

Fichier app.module.ts

Afficher un toast avec le ToastrService

Nous pouvons maintenant utiliser le ToastrService pour afficher nos toasts. Le service possède plusieurs méthodes suivant le type de toast (succès, erreur, avertissement).

Voici comment afficher très simplement un toast avec le message "Bonjour !".

<button (click)="showToast()">Afficher un toast</button>

Fichier app.component.html

  constructor(private toastrService: ToastrService) {}

  showToast() {
    this.toastrService.success('Bonjour !')
  }

Fichier app.component.ts

Le besoin le plus fréquent est d'afficher un toast de succès après la validation d'un formulaire si l'appel à l'API à fonctionner. Et afficher un toast d'erreur si l'appel à l'API a retourné une erreur.

  submitForm() {
    this.currentUserService.updateUsername(this.form.value.username).subscribe({
      next: () => {
        this.toastrService.success(`Nom d'utilisateur mis à jour avec succès !`)
      },
      error: (error: HttpErrorResponse) => {
        this.toastrService.error(error.error.message)
      },
    })
  }

Fichier app.component.ts

Configuration unitaire et globale

Nous pouvons changer le comportement d'un toast en lui passant des options en paramètre.

this.toastrService.success('Message', 'Titre', {
  progressBar: true,
  closeButton: true,
})

Nous pouvons aussi changer le comportement de tous les toasts avec des options globales en passant des options dans la méthode .forRoot().

imports: [
  ToastrModule.forRoot({ timeOut: 3000 }),
],

Configuration unitaire et globale

Nous avons vu comment utiliser le package ngx-toastr dans notre projet Angular et comment utiliser le ToastrService pour afficher nos toasts.

Cela va nous permettre facilement d'indiquer à l'utilisateur ce qui s'est bien ou mal passé afin d'améliorer son expérience.

Abonnez vous pour ne pas rater les nouveaux articles !