OsmToast

OsmToast is a simple and customizable toast notification library for Angular. It provides an easy way to display notifications in your Angular applications.

This library was generated with Angular CLI version 18.2.0.

Inspired from react-hot-toast

Installation

You can install OsmToast via npm:

npm install osm-toast

Usage

Module Setup

1. Import the OsmToastModule into your Angular module.

import { OsmToastModule } from 'osm-toast';

@NgModule({
  declarations: [AppComponent],
  imports: [OsmToastModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Inject OsmToastService to show different types of toasts.

// src/app/app.component.ts
import { Component } from '@angular/core';
import { OsmToastService } from 'osm-toast';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  posts: any[] = [];

  constructor(
    private toastService: OsmToastService,
    private dataService: DataService
) {}
  
  fetchData() {

    const id = this.toastService.loading('Fetching data...');
    this.dataService.fetchData().subscribe(
      (data) => {
        this.posts = data;
        this.toastService.success('Data fetched successfully!');
        this.toastService.discard(id);
      },
      (error) => {
        this.toastService.error('Error fetching data!');
        this.toastService.discard(id);
      }
    );
  }
}

Standalone Setup

mport { Component } from '@angular/core';
import { OsmToastService } from 'osm-toast';
import { DataService } from './data.service';

@Component({
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    imports: [OsmToastModule]
    //Need to import OsmToastModule in imports array
})
export class AppComponent {
  posts: any[] = [];

  constructor(
    private toastService: OsmToastService,
    private dataService: DataService
) {}
  
  fetchData() {

    const id = this.toastService.loading('Fetching data...');
    this.dataService.fetchData().subscribe(
      (data) => {
        this.posts = data;
        this.toastService.success('Data fetched successfully!');
        this.toastService.discard(id);
      },
      (error) => {
        this.toastService.error('Error fetching data!');
        this.toastService.discard(id);
      }
    );
  }
}

Usage in html component

<!-- OsmToast component will display toasts -->
<osm-toast></osm-toast>