How To Implement Toaster In Angular 4

I will introduce step by step in this angular tutorial which approaches the integration notification or the alarm module that indicates angular2 / 4. You can manage this alarm unit with angular version 2 and angle 4. In this code, we review the model to adjust Toaster globally to review Angular4, Of the blade size that results in greater capacity, and is as light as a pen that can be handled.

For animation with the ng toaster, you must embed the animation module into the angled v4 application.

The Toast is a graphical user interface (GUI) is usually a small window that displays the screen area of the screen, an element of a windowless element that is unmanaged in the interface. Info / Message window will display information that will automatically shorten at the bottom or at the top of the screen. This is primarily intended for users who are looking for information, and these changes make it easy to understand.

Install command

npm install ngx-toastr --save

@angular/animations package is a required dependency for the default toast.

npm install @angular/animations --save

Don't want to use @angular/animations

Setup

step 1: Include css

Copy toast css to your project.

If you are using sass you can import the css.

@import "~ngx-toastr/toastr.css";
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables
@import "~ngx-toastr/toastr-bs4-alert"

If you are using angular-cli you can add it to your angular-cli.json

"styles": [
  "styles.scss",
  "../node_modules/ngx-toastr/toastr.css"
]

step 2: Include Toastr Module to app NgModule

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot(), // ToastrModule added
  ],
  bootstrap: [App],
  declarations: [App],
})
class MainModule {}

You also use individual

Setting Individual Options

success, error, info, warning take (message, title, ToastConfig) pass an options object to replace any default option.

this.toastrService.error('everything is broken', 'Major Error', {
  timeOut: 3000,
});

Thanks