Creative makki toast.

Easy to use, customizable & support promise

Website · Documentation

_{Build by Daniel Jimenez}

Features

• Easy to use
• Customizable
• Dark mode
• Lightweight
• Accessible

Installation

With NPM

npm install makki-toast@latest

Getting Started

Add the makki toast and it will take care of render the alerts. From version 2.0.0 it's for Angular 21

Import Makki Toast in app.ts

import { Component } from '@angular/core'
import { RouterOutlet } from '@angular/router'
import { ToasterComponent } from 'makki-toast'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ToasterComponent],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  constructor() {}
}

Import Makki Toast in app.html

<app-toaster></app-toaster>
<router-outlet></router-outlet>

Import Makki Toast in Component

import { ToastService } from 'makki-toast'

constructor(
  private readonly toast: ToastService,
) {}

Info

this.toast.info({
  title: 'Info toast',
  description: 'Info toast message',
}); 

Success

this.toast.success({
  title: 'Success toast',
  description: 'Success toast message'
}); 

Warning

this.toast.warning({
  title: 'Warning toast',
  description: 'Warning toast message'
}); 

Error

this.toast.error({
  title: 'Error toast',
  description: 'Error toast message'
});  

Action

this.toast.action({
  title: 'Action toast',
  description: 'Action toast message',
  button: {
    title: 'View Details',
    onClick: () => console.log('show')
  },
});  

Promise

this.toast.promise(
  fetchData(),
  {
    loading: {
      title: 'Loading...',
    },
    success: (data) => ({
      title: 'Complete',
      description: 'promise complete message'
    }),
    error: (err) => ({
      title: 'Error',
      description: err.message
    })
  }
); 

Component in description without data

this.toast.promise(
  fetchData(),
  {
    loading: {
      title: 'Loading...',
    },
    success: (data) => ({
      title: 'Complete',
      description: DataComponent
    }),
    error: (err) => ({
      title: 'Error',
      description: err.message
    })
  }
); 

Component in description with share data

this.toast.promise(
  fetchData(),
  {
    loading: {
      title: 'Loading...',
    },
    success: (data) => ({
      title: 'Complete',
      description: {
        component: DataComponent,
        inputs: {
          data: data
        }
      }
    }),
    error: (err) => ({
      title: 'Error',
      description: err.message
    })
  }
); 

export class DataComponent {
  @Input() data!: any;
}

Documentation

Find the full documentation on official documentation