# ngx-toasta [](https://badge.fury.io/js/ngx-toasta) [](https://www.npmjs.com/package/ngx-toasta)
An angularX toast component that shows growl-style alerts and messages for your application.
Follow me
[](https://twitter.com/kommand)
to be notified about new releases.
## Installation
```sh
npm install ngx-toasta
```
## Demo
Online demo available [here](https://emonney.github.io/ngx-toasta)
## Usage
If you use SystemJS to load your files, you might have to update your config:
```js
System.config({
map: {
'ngx-toasta': 'node_modules/ngx-toasta/bundles/index.umd.js'
}
});
```
#### 1. Update the markup
- Import style into your web page. Choose one of the following files;
- `style-default.css` - Contains DEFAULT theme
- `style-bootstrap.css` - Contains Bootstrap 3 theme
- `style-material.css` - Contains Material Design theme
- Assign the selected theme name [`default`, `bootstrap`, `material`] to the `theme` property of the instance of ToastaConfig.
- Add `` tag in template of your application component.
#### 2. Import the `ToastaModule`
Import `ToastaModule.forRoot()` in the NgModule of your application.
The `forRoot` method is a convention for modules that provide a singleton service.
```ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {ToastaModule} from 'ngx-toasta';
@NgModule({
imports: [
BrowserModule,
ToastaModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
If you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),
don't forget that you can use it to export the `ToastaModule` that you imported in order to avoid having to import it multiple times.
```ts
@NgModule({
imports: [
BrowserModule,
ToastaModule.forRoot()
],
exports: [BrowserModule, ToastaModule],
})
export class SharedModule {
}
```
#### 3. Use the `ToastaService` for your application
- Import `ToastaService` from `ngx-toasta` in your application code:
```js
import {Component} from '@angular/core';
import {ToastaService, ToastaConfig, ToastOptions, ToastData} from 'ngx-toasta';
@Component({
selector: 'app',
template: `
Hello world
`
})
export class AppComponent {
constructor(private toastaService:ToastaService, private toastaConfig: ToastaConfig) {
// Assign the selected theme name to the `theme` property of the instance of ToastaConfig.
// Possible values: default, bootstrap, material
this.toastaConfig.theme = 'material';
}
addToast() {
// Just add default Toast with title only
this.toastaService.default('Hi there');
// Or create the instance of ToastOptions
var toastOptions:ToastOptions = {
title: "My title",
msg: "The message",
showClose: true,
timeout: 5000,
theme: 'default',
onAdd: (toast:ToastData) => {
console.log('Toast ' + toast.id + ' has been added!');
},
onRemove: function(toast:ToastData) {
console.log('Toast ' + toast.id + ' has been removed!');
}
};
// Add see all possible types in one shot
this.toastaService.info(toastOptions);
this.toastaService.success(toastOptions);
this.toastaService.wait(toastOptions);
this.toastaService.error(toastOptions);
this.toastaService.warning(toastOptions);
}
}
```
#### 4. How to dynamically update title and message of a toast
Here is an example of how to dynamically update message and title of individual toast:
```js
import {Component} from '@angular/core';
import {ToastaService, ToastaConfig, ToastaComponent, ToastOptions, ToastData} from 'ngx-toasta';
import {Subject, Observable, Subscription} from 'rxjs/Rx';
@Component({
selector: 'app',
template: `
Hello world
`
})
export class AppComponent {
getTitle(num: number): string {
return 'Countdown: ' + num;
}
getMessage(num: number): string {
return 'Seconds left: ' + num;
}
constructor(private toastaService:ToastaService) { }
addToast() {
let interval = 1000;
let timeout = 5000;
let seconds = timeout / 1000;
let subscription: Subscription;
let toastOptions: ToastOptions = {
title: this.getTitle(seconds),
msg: this.getMessage(seconds),
showClose: true,
timeout: timeout,
onAdd: (toast: ToastData) => {
console.log('Toast ' + toast.id + ' has been added!');
// Run the timer with 1 second iterval
let observable = Observable.interval(interval).take(seconds);
// Start listen seconds beat
subscription = observable.subscribe((count: number) => {
// Update title of toast
toast.title = this.getTitle(seconds - count - 1);
// Update message of toast
toast.msg = this.getMessage(seconds - count - 1);
});
},
onRemove: function(toast: ToastData) {
console.log('Toast ' + toast.id + ' has been removed!');
// Stop listenning
subscription.unsubscribe();
}
};
switch (this.options.type) {
case 'default': this.toastaService.default(toastOptions); break;
case 'info': this.toastaService.info(toastOptions); break;
case 'success': this.toastaService.success(toastOptions); break;
case 'wait': this.toastaService.wait(toastOptions); break;
case 'error': this.toastaService.error(toastOptions); break;
case 'warning': this.toastaService.warning(toastOptions); break;
}
}
}
```
#### 5. How to close specific toast
Here is an example of how to close an individual toast:
```js
import {Component} from '@angular/core';
import {ToastaService, ToastaConfig, ToastaComponent, ToastOptions, ToastData} from 'ngx-toasta';
import {Subject, Observable, Subscription} from 'rxjs/Rx';
@Component({
selector: 'app',
template: `
Hello world
`
})
export class AppComponent {
getTitle(num: number): string {
return 'Countdown: ' + num;
}
getMessage(num: number): string {
return 'Seconds left: ' + num;
}
constructor(private toastaService:ToastaService) { }
addToast() {
let interval = 1000;
let subscription: Subscription;
let toastOptions: ToastOptions = {
title: this.getTitle(0),
msg: this.getMessage(0),
showClose: true,
onAdd: (toast: ToastData) => {
console.log('Toast ' + toast.id + ' has been added!');
// Run the timer with 1 second iterval
let observable = Observable.interval(interval);
// Start listen seconds beat
subscription = observable.subscribe((count: number) => {
// Update title of toast
toast.title = this.getTitle(count);
// Update message of toast
toast.msg = this.getMessage(count);
// Extra condition to hide Toast after 10 sec
if (count > 10) {
// We use toast id to identify and hide it
this.toastaService.clear(toast.id);
}
});
},
onRemove: function(toast: ToastData) {
console.log('Toast ' + toast.id + ' has been removed!');
// Stop listenning
subscription.unsubscribe();
}
};
switch (this.options.type) {
case 'default': this.toastaService.default(toastOptions); break;
case 'info': this.toastaService.info(toastOptions); break;
case 'success': this.toastaService.success(toastOptions); break;
case 'wait': this.toastaService.wait(toastOptions); break;
case 'error': this.toastaService.error(toastOptions); break;
case 'warning': this.toastaService.warning(toastOptions); break;
}
}
}
```
#### 6. Customize the `ngx-toasta` for your application in template
You can use the following properties to customize the ngx-toasta component in your template:
- `position` - The window position where the toast pops up. Default value is `bottom-right`. Possible values: `bottom-right`, `bottom-left`, `bottom-fullwidth` `top-right`, `top-left`, `top-fullwidth`,`top-center`, `bottom-center`, `center-center`
Example:
```html
```
#### 7. Options
Use these options to configure individual or global toasts
Options specific to an individual toast:
```js
ToastOptions
{
"title": string, //A string or html for the title
"msg": string, //A string or html for the message
"showClose": true, //Whether to show a close button
"showDuration": true, //Whether to show a progress bar
"theme": "default", //The theme to apply to this toast
"timeout": 5000, //Time to live until toast is removed. 0 is unlimited
"onAdd": Function, //Function that gets called after this toast is added
"onRemove": Function //Function that gets called after this toast is removed
}
```
Configurations that affects all toasts:
```js
ToastaConfig
{
"limit": 5, //Maximum toasts that can be shown at once. Older toasts will be removed. 0 is unlimited
"showClose": true, //Whether to show the 'x' icon to close the toast
"showDuration": true, //Whether to show a progress bar at the bottom of the notification
"position": "bottom-right", //The window position where the toast pops up
"timeout": 5000, //Time to live in milliseconds. 0 is unlimited
"theme": "default" //What theme to use
}
```
# Credits
Original work by [ng2-toasty](https://github.com/akserg/ng2-toasty)
# License
[MIT](https://github.com/emonney/ngx-toasta/blob/master/LICENSE)