ng-toasty

This library was generated with Angular CLI version 16.1.0.

Code Implementation : Let's Program Blog

Features

• 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

Install

npm i ng-toasty

Setup

• import ToastyModule in app.module.ts

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

@NgModule({
  declarations: [
    HeaderComponent,

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

})
export class AppModule { }

• use the selector <ng-toasty [position]="ToasterPosition.TOP_RIGHT"> in app.component.html file

Use

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  ToasterPosition = ToasterPosition;
  constructor(
    private toast: ToastyService //to be injected
  ) { }

  ngOnInit(): void {
  }

  showSuccess() {
    this.toaster.success("This is success Message") //default duration is 2000ms (2secs)
  }
  
  showError() {
    this.toast.danger("Something went wrong!", 4000); // will hide after 4secs
  }

  showInfo() {
    this.toast.info("information Message!", 4000); // will hide after 4secs
  }

  showWarn() {
    this.toast.warning("your warning message!", 4000); // will hide after 4secs
  }

}

• Customize the width based on your requirement

    <ng-toasty [width]="300" [position]="ToasterPosition.TOP_RIGHT"></ng-toasty>

• Updated the styles for Mobile responsive

FAQ

• Does it Support Lower version of Angular (<=v15)?
  NO :(

Check out article on ng-toasty Integration with Angular

License

MIT

---

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