ZwSnackbarMessage

This library was generated with Angular CLI version 18.2.12.

Usage

Just install the package with:

npm install zw-snackbar-message

and import the 'ZwSnackbarMessageModule' to your own module where you want to use it.

After you are installed and imported it correctly, your errors should be shown as snackbar. And also you can use 'MessageNotificationService' to show error message with 'showError(error: string, duration: number - optional, horizontalPosition - optional, verticalPosition - optional)' method or to show a success message with 'showSuccess(message: string, duration: number - optional, horizontalPosition - optional, verticalPosition - optional)' method. You can also use 'showCustom(message: string, duration: number - optional, horizontalPosition - optional, verticalPosition - optional)' method with your own custom classname to show a message with custom classname.

Code Example

Firstly you should import the service to tha desired component or service. For that use this in the component's constructor:

private messageService: MessageNotificationService

After you can use it like this:

showSnackbar() {
  this.messageService.showCustom('custom-classname','Message to show!')
}

It uses an Http Interceptor to show the Http error messages.

The error and success snackbar colors depends on you. Yous should add '.success' and '.error' classes with .mat-mdc-snackbar-surface to your css and set a desired color for it. Also if you are want to use your custom class name snackbar with 'showCustom' method, you should add your '.custom-classname' selector with your color config to your css.

Style Example

.success .mat-mdc-snackbar-surface {
  background-color: green!important;
}

.error .mat-mdc-snackbar-surface {
  background-color: red!important;
}

.custom-classname .mat-mdc-snackbar-surface {
  background-color: aqua!important;
}

Multiple interceptors

If you are have multiple interceptors, then you need to create a provider array for interceptors. Include the error interceptor from the 'zw-snackbar-message' with the others and provide that in the 'app.module.ts'.

Constants

import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { Provider } from "@angular/core";
import { LoadingInterceptor } from "zw-loading-screen";
import { ErrorInterceptor } from "zw-snackbar-message";

export const interceptorProviders: Provider[] = [
  { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
]

App Module

import { interceptorProviders } from 'path-to-exported-constants';

providers: [
    interceptorProviders
  ],

Further help

If you are not understanding something about the usage, feel free to reach me out.