NgxMgwSnackbarMatSnackbar

This library was generated with Angular CLI version 18.2.0.

Un composant Angular personnalisable pour afficher des snackbar (notifications) basés sur Material Design.

Ce composant étend les fonctionnalités de @angular/material/snack-bar pour offrir une expérience plus riche et personnalisable, avec des styles prédéfinis, des icônes, des barres de progression et une gestion fine des couleurs.

📦 Installation

Installation du package via npm :

npm install ngx-mgw-snackbar-mat-snackbar --save

Assurez-vous d'avoir @angular/material installé dans votre projet :

ng add @angular/material

🚀 Utilisation

1. Injection du service

Injectez NgxMgwSnackbarMatSnackbarService dans votre composant :

import { NgxMgwSnackbarMatSnackbarService } from 'ngx-mgw-snackbar-mat-snackbar';

...

private readonly ngxMgwSnackbarMatSnackbarService = inject(NgxMgwSnackbarMatSnackbarService);

2. Afficher un snackbar

Utilisez la méthode openSnackBar() pour afficher un snackbar :

this.ngxMgwSnackbarMatSnackbarService.openSnackBar('Opération réussie !', {
  action: 'Fermer',
  duration: 5000,
  progressMode: 'buffer',
  type: 'success',
  labelColor: '#27F5A6DD'
});

🎨 Personnalisation

Options disponibles

| Propriété | Type | Description | Valeur par défaut | | --------- | ---- | ----------- | ----------------- | | message | string | Message principal du snackbar. Obligatoire. | - | | action | string ou false | Texte du bouton d'action. Si false ou chaine vide aucun bouton n'est affiché. | undefined ("Ok") | | type | SnackbarTypeStyle ou SnackbarType | Style du message du snackbar ou type du snackbar ('success', 'warning', 'info'). | undefined ("none") | | duration | number | Durée d'affichage du snackbar en millisecondes. | undefined | | labelColor | string | Couleur du texte (valeur CSS valide). | undefined | | progressMode | ProgressMode ou false | Mode de la barre de progression ('determinate', 'indeterminate'). | undefined ("determinate") |

SnackbarType

| Propriété | Type | Description | Valeur par défaut | | --------- | ---- | ----------- | ----------------- | | style | SnackbarTypeStyle | Style du message du snackbar. Obligatoire. | - | | icon | boolean | Affiche l'icône associée au type. | undefined (true) | | noColor | true | N'applique pas les couleurs par défaut du style. Doit être true. | undefined (false) |

Option supplémentaire sur NgxMgwSnackbarMatSnackbarData

| Propriété | Type | Description | Valeur par défaut | | --------- | ---- | ----------- | ----------------- | | bufferValue | number | Valeur du buffer pour la barre de progression (progressMode = 'buffer'). | undefined |

Styles prédéfinis

type SnackbarTypeStyle = 'none' | 'success' | 'warning' | 'info';

📂 Interfaces

NgxMgwSnackbarMatSnackbarConfig

Configuration pour personnaliser le comportement et l'apparence du snackbar.

export interface NgxMgwSnackbarMatSnackbarConfig {
  action?: string | false;
  duration?: number;
  progressMode?: ProgressMode | false;
  type?: SnackbarTypeStyle | SnackbarType;
  labelColor?: string;
}

NgxMgwSnackbarMatSnackbarData

Données nécessaires pour afficher le snackbar personnalisé.

export interface NgxMgwSnackbarMatSnackbarData {
  message: string;
  action?: string | false;
  type?: SnackbarTypeStyle | SnackbarType;
  labelColor?: string;
  progressMode?: ProgressMode | false;
  bufferValue?: number;
}

SnackbarType

Défini le paramétrage du type du snackbar personnalisé.

export interface SnackbarType {
  style: SnackbarTypeStyle;
  icon?: boolean;
  noColor?: true;
}

2025, MegaO Informatique