Toast module

Installation

yarn add @ngsm/toast or npm i @ngsm/toast --save

Usage

Import ToastModule in your app.module.ts:

import { ToastModule } from '@ngsm/toast';

...,
@NgModule({
  ....,
  imports: [
    ....,
    // With default global configuration
    ToastModule

    // With custom global configuration:
    ToastModule.forRoot({
      duration: 2000, // number
      message: 'Default message', // string
      component: YourDefaultToastComponent, // Extended ToastComponent
      isCloseIconHidden: false, // boolean
      metadata: { title: 'My title' }, // custom type
      errorHandler: (error) => error.title // (error: HttpErrorResponse) => string;
    })
  ]
}

<ngsm-toast-container></ngsm-toast-container>

...
import { QueryFacade } from '@ngsm/query';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  constructor(
    private toastService: ToastService,
    private httpClient: HttpClient,
  ) { }

  openSimpleToast(message: string): void {
    this.toastService.open({
      type: 'success',
      message
    });
  }

  openToastWithCustomComponent(message: string): void {
    this.toastService.open({
      message,
      type: ToastType.WARNING,
      component: ToastCustomComponent,
      metadata: {
        title: 'title',
      }
    });
  }

  integrationWithHttpClient(): void {
    this.httpClient
      .get('{YOUR_API_URL}', {
        headers: {
          toastSuccess: '{YOUR_SUCCESS_MESSAGE}',
          toastError: '{YOUR_ERROR_MESSAGE}',
        }
      }).subscribe();
  }


  errorHandlerForToastAndHttpClient(): void {
    this.httpClient
      .get('{YOUR_API_URL}', {
        headers: {
          toastSuccess: '{YOUR_SUCCESS_MESSAGE}',
          toastInfo: '{YOUR_ERROR_MESSAGE}',
          toastErrorHandler: 'true',
        }
      }).subscribe();
  }

  closeToast(): void {
    this.toastService.close();
  }
}

// Custom Toast
@Component({
  selector: 'app-toast-custom',
  template: '<div>My custom toast {{ config?.metadata?.title }}</div>',
})
export class TestToastComponent extends ToastComponent<ToastMetada> {}

You can overwrite style variables in your global css/scss file:

:root {
  --toast-background-default: #383838;
  --toast-color-default: #ffffff;
  --toast-background-info: #62a5e7;
  --toast-color-info: #ffffff;
  --toast-background-success: #659e1b;
  --toast-color-success: #ffffff;
  --toast-background-warning: #e9b404;
  --toast-color-warning: #ffffff;
  --toast-background-error: #f04e31;
  --toast-color-error: #ffffff;
  --toast-margin: 12px;
  --toast-padding: 12px 20px;
  --toast-padding-right: 40px;
  --toast-radius: 4px;
  --toast-icon-padding: 16px;
  --toast-icon-size: 10px;
  --toast-box-shadow: 0 3px 6px rgba(0,0,0, .2);
}

Author

Sebastian Musiał kontakt@sebastianmusial.pl @sebamusial