Barra de bocadillos

El servicio de snackbar muestra un mensaje emergente en la esquina superior derecha de la pantalla; sin embargo, la posición puede ser cambiada por cambiando las posiciones horizontal y vertical en el servicio. La duración de cuánto tiempo se muestra el popup también puede ser cambiado al modificar la variable 'duration', es de 3 segundos por defecto.

Hay cuatro mensajes diferentes para elegir: Éxito, Error, Advertencia e Información, cada mensaje se muestra con un ícono diferente que coincide con el tipo de mensaje. El servicio tiene cuatro funciones, cada una para un tipo de mensaje diferente.

Está construido utilizando MatSnackBar from @angular/material/snack-bar biblioteca.

Cada método de mensaje de snackbar recibe un objeto de datos que incluye un título y una descripción. Este es el texto que se mostrará en el popup del snackbar.

Ejemplo de uso:

showSuccessSnackbar

onCellClick(value: string | undefined | null): void {
        if (value) {
            navigator.clipboard.writeText(value).then(() =>
                this.snackbarService.showSuccessSnackbar({
                    title: this.translocoService.translate('common.tableComponent.copyToClipboardTitle'),
                    description: this.translocoService.translate('common.tableComponent.copyToClipboardDescription', {
                        value
                    })
                })
            );
        }
    }

showErrorSnackbar

handleApiError$ = createEffect(
        () =>
            this.actions$.pipe(
                ofType(
                    ProcessingEntitySettingsActions.apiError,
                    ProcessingEntitySettingsActions.processingEntitySearchFailed
                ),
                tap((action) =>
                    this.snackBarService.showErrorSnackbar({
                        title: action.error.name,
                        description: action.error.message
                    })
                )
            ),
        { dispatch: false }
    );