Angular 6 Toaster Notifications Module ===================
npm install ng6-toastr-notificationsAngular 6 Toaster Notifications Module
===================
NOTE : Tested with Angular v6.0.0 and Angular-Cli v6.0.0.
npm install ng6-toastr-notifications --save `
2. Add ToastrModule into your AppModule class. app.module.ts would look like this:
Take Note : For Toastr Animations working perfectly please import BrowserAnimationsModule into app.module.ts file.
`javascript
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToastrModule } from 'ng6-toastr-notifications';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ToastrModule.forRoot()],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
`
3. Inject 'ToastsManager' class in your component class.
`typescript
import { Component } from '@angular/core';
import { ToastrManager } from 'ng6-toastr-notifications';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(public toastr: ToastrManager) {}
showSuccess() {
this.toastr.successToastr('This is success toast.', 'Success!');
}
showError() {
this.toastr.errorToastr('This is error toast.', 'Oops!');
}
showWarning() {
this.toastr.warningToastr('This is warning toast.', 'Alert!');
}
showInfo() {
this.toastr.infoToastr('This is info toast.', 'Info');
}
showCustom() {
this.toastr.customToastr(
'Custom Toast',
null,
{ enableHTML: true }
);
}
showToast(position: any = 'top-left') {
this.toastr.infoToastr('This is a toast.', 'Toast', {
position: position
});
}
}
`
$3
By default, the toastr will show up at top right corner of the page view, and will automatically dismiss in 3 seconds.
You can configure the toasts using ToastOptions class. Currently we support following options:
##### toastTimeout: (number)
Determines how long an auto-dismissed toast will be shown. Defaults to 5000 miliseconds.
##### dismiss: (string)
Determine how a displayed toaster can be dismissed. Allowed values are: 'auto', 'click', 'controlled' (value should all be lowercase).
* auto: Toaster will auto dismiss in miliseconds (value specified by toastTimeout). This is default value.
* click: Toaster will be dismissed when user click on it.
* controlled: Toaster will be dismissed based on specific logic.
##### newestOnTop: (boolean)
Determines whether new toast should show up on top of previous toast Defaults to false.
##### showCloseButton: (boolean)
Determines whether toast should include 'x' close button. Defaults to false.
##### maxShown: (number)
Determines maximum number of toasts can be shown on the page in the same time. Defaults to 5.
##### position: (string)
Determines where on the page the toasts should be shown. Here are list of values:
* top-right (Default)
* top-center
* top-left
* top-full-width
* bottom-right
* bottom-center
* bottom-left
* bottom-full-width
##### messageClass: (string)
CSS class for message within toast.
##### titleClass: (string)
CSS class for title within toast.
##### animate: (string)
You have following choice: 'slideFromLeft', 'slideFromRight' or 'slideFromTop'.
* slideFromLeft: makes every toast slide in from left side. (Default)
* slideFromRight: makes every toast slide in from right side.
* slideFromTop: makes every toast slide in from top side.
* slideFromBottom: makes every toast slide in from bottom side.
* fade: makes every toast either fade in or fade out.
* You can set animate: null` to disable animations.