Toast Angular - JavaScript

Toast Angular is a library for displaying toast notifications in Angular applications. Toast notifications are used to display important messages to users in a non-intrusive way. The library is built on top of Angular Material and provides a customizable and flexible way of displaying toasts.

Features

• Easy to use and integrate with existing Angular applications.
• Customizable toasts with configuration options for position, duration, message, and more.
• Animated toasts that slide in and out of view.
• Supports multiple toasts that can be displayed simultaneously.
• Provides a simple API for creating and displaying toasts with minimal code.

Installation

To install Toast Angular, run the following command in your Angular project:

npm install @angular-toast/core @angular-toast/mat-toast

After installing the library, you need to import the ToastModule in your application module.

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastModule } from '@angular-toast/core';
import { MatToastModule } from '@angular-toast/mat-toast';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    ToastModule.forRoot(),
    MatToastModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

To display a toast notification, you need to inject the ToastService and call the show function with a message and an optional configuration object.

import { Component } from '@angular/core';
import { ToastService } from '@angular-toast/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  constructor(private toastService: ToastService) { }

  showToast() {
    this.toastService.show('Hello, world!', { duration: 3000 });
  }

}

In the above example, we are displaying a toast notification with a message 'Hello, world!' and a duration of 3000 milliseconds (3 seconds).

Configuration

The Toast Angular library supports many configuration options that can be used to customize the appearance and behavior of toasts. Here are some of the commonly used configuration options.

Position

The position option can be used to change the position of the toast notification. The default position is 'bottom'.

this.toastService.show('Hello, world!', { position: 'top' });

Duration

The duration option can be used to change the duration of the toast notification in milliseconds. The default duration is 5000 milliseconds (5 seconds).

this.toastService.show('Hello, world!', { duration: 3000 });

Class

The class option can be used to add custom CSS classes to the toast notification. This can be useful for styling the toast notification to match the theme of your application.

this.toastService.show('Hello, world!', { class: 'my-toast' });

Conclusion

Toast Angular is a powerful library for displaying toast notifications in Angular applications. With its many configuration options, customization possibilities, and simple API, it can save you a lot of time and effort in displaying important messages to your users.