Angular 6 Toaster Notifications Module
NOTE : Tested with Angular v6.0.0 and Angular-Cli v6.0.0.
Usage
-
Install ng6-toastr-notifications using npm:
npm install ng6-toastr-notifications --save
-
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.
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 {}
-
Inject 'ToastsManager' class in your component class.
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(
'<span style='color: green; font-size: 16px; text-align: center;'>Custom Toast</span>',
null,
{ enableHTML: true }
);
}
showToast(position: any = 'top-left') {
this.toastr.infoToastr('This is a toast.', 'Toast', {
position: position
});
}
}
ToastrOptions Configurations
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.
enableHTML: (boolean)
Allow input of message to be HTML. Default to false.
Demo App Link
[Ng6 Toastr Notification Demo Link] (http://technoidlab.com/demos/ng6-toastr-notifications)
How to Run demo app
angular-cli
> cd demo/ngcli && npm install
> ng serve
Then navigate your browser to http://localhost:4200
webpack
> cd demo/webpack && npm run install
> npm run build
> npm start