ngx-toaster

Native Angular Toaster Module (ngx-toaster)
==============================================

The library provides a toast notification which is written in native Angular and it is dependent on bootstrap, angular native animation.

Guide:

1. Install the ngx-toaster using npm
npm install ngx-toaster
- Note : Use the regular npm flags such as
- --save to include under dependencies in package.json.
- -g to install it globally

*

2. Add ToasterModule to AppModule by importing it from ngx-toaster package
``
import { ToasterModule } from 'ngx-toaster/src/lib';

@NgModule({
imports: [ToasterModule],
...
})
export class AppModule {
}
`
*

3. As this library uses Angular animations. BrowserAnimationsModule should also be imported to the app.module.
- Note : Further exploration of @angular/animations module can be referred here, official documentation.

`
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
imports: [BrowserAnimationsModule],
...
})
export class AppModule {
}
`


*

4. Create a placeholder for the ngx-toast-notification componenet in your app.component.html
`

`

*

5. Inject the ToasterService into your component
`
constructor(private toasterService: ToasterService) { }
`

*

6. The toast message configuration contains following properties


|Property | Data Type | Mandatory | Default Value | Usage |
| ------------ | ---------- | -------------- | --------------------- | ---------------------------------------------- |
| id | string | No | ---------- | Auto generated for each notification |
| message | string | Yes | ---------- | The user defined toast message |
| autoHide | boolean | No | true | This will hide the message |
| displayDuration | number | No | 5000(milli seconds) | Timeout Duration can be set using this property |
| showCloseButton | boolean | No | true | Close button can be seen for manually closing it |
| toastType | ToastType | Yes | ---------- | Type of the toast message can be set htere |

- where ToastType is a enumeration type that determines the type of the notification which takes a five values viz.,
* ERROR
* WARNING>
* SUCCESS
* INFORMATION
* EMPTY

*

7. To show the toast message you should be calling the showToastMessage() method that takes toastMessageConfiguration as its argument
`
let toastNotificationConfiguration: ToastNotificationConfiguration = {
message: 'Sample Toast message',
displayDuration: 1000,
autoHide: true,
showCloseButton: true,
toastType: ToastType.INFORMATION
};
this.toasterService.showToastMessage(toastNotificationConfiguration);
`
*

8. To manually close a particular toast message set the autoHide property as false and showCloseButton property as true which displays a close button using which the message can be manually closed.

*

9. To hide all the toast messages you should be using the clearAllToastMessages() method.
`
this.toastNotificationService.clearAllToastMessages();
`

*

10. To show multiple toast messages you can call the showToastMessage() multiple times by configuring the notification object as you wish
`
let informationalToastNotificationConfiguration: ToastNotificationConfiguration = {
message: 'Informational Toast message',
displayDuration: 1000,
autoHide: true,
showCloseButton: false,
toastType: ToastType.INFORMATION
};
this.toasterService.showToastMessage(informationalToastNotificationConfiguration);

let errorToastNotificationConfiguration: ToastNotificationConfiguration = {
message: 'Error Toast message',
autoHide: false,
toastType: ToastType.ERROR
};
this.toasterService.showToastMessage(errorToastNotificationConfiguration);

let successToastNotificationConfiguration: ToastNotificationConfiguration = {
message: 'Success Toast message',
autoHide: false,
toastType: ToastType.SUCCESS
};

this.toasterService.showToastMessage(successToastNotificationConfiguration);
``

For LIVE DEMO checkout the plunker