ngx-toastr - JavaScript

ngx-toastr is a library for displaying beautiful and customizable toast messages in Angular applications. With ngx-toastr, you can easily display informative or success messages to your users, alert them of errors, or simply provide them with feedback.

Features

Some of the key features offered by ngx-toastr include:

• Customizable toast messages with various options such as position, animation, timeout, and more
• Multiple pre-defined toast types, including success, info, warning, and error
• Custom toast types that can be defined by the user
• Ability to stack toasts on top of each other
• Ability to auto-dismiss or require user interaction to dismiss
• Compatibility with Angular 2.x, 4.x, 5.x, and 6.x

Installation

To use ngx-toastr in your Angular app, you will need to install it using npm:

npm install ngx-toastr --save

Then, import the ToastrModule into your Angular @NgModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Once ngx-toastr is installed and imported into your Angular module, you can use it in your components by injecting the ToastrService:

import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(private toastr: ToastrService) { }
  
  showSuccess() {
    this.toastr.success('Hello world!', 'Success');
  }
  
  showError() {
    this.toastr.error('Something went wrong.', 'Error');
  }
  
}

In the example above, the ToastrService is injected into the AppComponent constructor. Two methods are then created to show success and error toasts when called.

Conclusion

ngx-toastr is a great library for displaying toast messages in Angular applications. With its versatile customization options, it can easily be tailored to fit any project's needs. By following the installation and usage examples outlined above, you should be well on your way to using ngx-toastr to its full potential in your own app.