Easy to integrate
Supports success, error, info and warning toaster messages
Fresh Design
Supports 6 toast position (Top Left, Top Right, Top Center, Bottom Left, Bottom Right, Bottom Center)
Support Duration with close feature

Dependencies

Recommend to use the latest version of ng-toasty More Compatible with Latest version of Angular

ng-toasty	Angular
current	>= 16.x

For Lower version of Angular use

npm i ng-toasty -f

Install

npm i ng-toasty

Setup

Add ToasterModule to App NgModule

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AngularBlog</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- To be Added  -->
</head>

<body class="mat-typography">
    <app-root></app-root>
</body>

</html>

import ToastModule in app.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './component/header/header.component';
import { ToastModule } from 'ng-toasty' // to be added

@NgModule({
  declarations: [
    HeaderComponent,

  ],
  imports: [
    NgToastModule // to be added
  ],

})
export class AppModule { }

use the selector in app.component.html file

Use

import { Component } from '@angular/core';
import { ToastyService } from 'ng-toasty';

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

  constructor(
    private toast: ToastyService <---to be injected
  ) { }

  ngOnInit(): void {
  }

  showSuccess() {
    this.toast.success({detail:"SUCCESS",summary:'Your Success Message',duration:'5000'});
  }
  
  showError() {
    this.toast.error({detail:"ERROR",summary:'Your Error Message',sticky:true});
  }

  showInfo() {
    this.toast.info({detail:"INFO",summary:'Your Info Message',sticky:true});
  }

  showWarn() {
    this.toast.warn({detail:"WARN",summary:'Your Warn Message',duration:'5000'});
  }

}

NEW features

Custom position for toaster

  //show Toast on top center position
  showSuccessTopCenter() {
    this.toast.success({detail:"SUCCESS",summary:'Your Success Message',duration:'5000', position:'topCenter'});
  }

  //show Toast on bottom center position
  showErrorBottonCenter() {
    this.toast.error({detail:"ERROR",summary:'Your Error Message',sticky:true, position:'bottomCenter'});
  }

  //show Toast on top left position
  showInfo() {
    this.toast.info({detail:"INFO",summary:'Your Info Message',sticky:true, position: 'topLeft'});
  }

  //show Toast on bottom left position
  showWarn() {
    this.toast.warn({detail:"WARN",summary:'Your Warn Message',duration:'5000', position: 'bottomLeft'});
  }

  //show Toast on top right position
  showInfo() {
    this.toast.info({detail:"INFO",summary:'Your Info Message',sticky:true, position: 'topRight'});
  }

  //show Toast on bottom right position
  showWarn() {
    this.toast.warn({detail:"WARN",summary:'Your Warn Message',duration:'5000', position: 'bottomRight'});
  }

}

Updated the Selector from to

    <ng-toasty></ng-toasty> <!-- OLD WAY -->
    <ng-toast></ng-toast> <!-- NEW WAY -->

Customize the width based on your requirement

    <ng-toast [style]="{width:'300px'}"></ng-toast>

Updated the styles for Mobile responsive

FAQ

Check out article on ng-toasty Integration with Angular

License

MIT

GitHub @SashikumarYadav · Blog @LetsProgram · LinkedIn @SashikumarYadav · Medium @SashikumarYadav

FAQs

What is ng-toasty?

Is ng-toasty popular?

Is ng-toasty well maintained?

Package last updated on 04 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install