A lightweight and simple to use library for Angular applications that provides an easy way to display toast notifications.
npm install --save ngx-toast-notifications
@angular/animations package should also be installed.
import { ToastNotificationsModule } from 'ngx-toast-notifications';
@NgModule({
...
imports: [
...
BrowserAnimationsModule, // required
ToastNotificationsModule,
],
...
})
export class AppModule {}
import { Toaster } from 'ngx-toast-notifications';
@Component({
template: '<button (click)="showToast()">Show Toast</button>',
})
export class MyComponent {
constructor(private toaster: Toaster) {
}
showToast() {
this.toaster.open('Hello world!');
}
}
Try interactive demo on stackblitz
Toasts scale to match the size of the page content by using relative font sizing. To change the size of the toast simply change font size of the html element.
Toaster.open
returns a Toast
object. This can be used to close toast or subscribe for an event when the toast is closed.
const toast = this.toaster.open('Message');
toast.onClose.subscribe((result) => {
// toast closed
});
toast.close('success');
Global toast configuration that you can specify when importing the ToastNotificationsModule.
Parameter | Type | Description |
---|---|---|
position | ToastPosition | The position to place the toasts on the screen (default value is 'bottom-right') |
autoClose | boolean | Determines if the toasts will automatically close after the specified time (default value is true) |
duration | number | The length of time in milliseconds before dismissing (default is 8 sec) |
type | ToastType | Color scheme type of the toasts |
component | Type from '@angular/core' | Custom component to replace default toast content (more on that below) |
preventDuplicates | boolean | Determines if the toast will be rejected when the one with same content is already present (default value is false) |
'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
Each type corresponds to Bootstrap4 ones by color. This means that if you use Bootstrap in your project, it will match the style, but you can still use ngx-toast-notifications without Bootstrap installed.
imports: [
ToastNotificationsModule.forRoot({duration: 6000, type: 'primary'})
],
imports: [
ToastNotificationsModule,
],
providers: [
{provide: TOAST_NOTIFICATIONS_CONFIG, useValue: {duration: 6000, type: 'primary'}},
]
extends ToastNotificationsConfig
Configuration for a specific toast.
Parameter | Type | Description |
---|---|---|
text | string | Main text for the toast |
caption | string | Toast caption |
position | ToastPosition | The position to place the toast on the screen (default value is 'bottom-right') |
autoClose | boolean | Determines if the toast will automatically close after the specified time (default value is true) |
duration | number | The length of time in milliseconds before dismissing (default is 8 sec) |
type | ToastType | Color scheme type of the toast |
component | Type from '@angular/core' | Custom component to replace default toast content (more on that below) |
preventDuplicates | boolean | Determines if the toast will be rejected when the one with same content is already present (default value is false) |
this.toaster.open({text: 'Pizza party', caption: 'Hooray', duration: 4000, type: 'primary', component: MyCustomComponent});
You can provide a given component to replace default toast content.
@Component({
template:
'<div style="padding: 1rem;">' +
'<div>{{toast.text}}</div>' +
'<button (click)="toast.close()">Close</button>' +
'</div>',
})
export class CustomToastComponent {
@Input() toast: Toast;
}
@NgModule({
...
declarations: [
...
CustomToastComponent,
],
// for the Angular before version 9 the following declaration is also required for imperative loading
/* entryComponents: [
CustomToastComponent,
], */
...
})
export class AppModule {}
ToastNotificationsModule.forRoot({component: CustomToastComponent}),
this.toaster.open(CustomToastComponent, {text: 'This is text for custom toast'});
Stackblitz demo of Custom Toast
MIT