
Security News
AI Slop Is Polluting Bug Bounty Platforms with Fake Vulnerability Reports
AI-generated slop reports are making bug bounty triage harder, wasting maintainer time, and straining trust in vulnerability disclosure programs.
ngx-toastr
Advanced tools
ngx-toastr is an Angular library for displaying toast notifications. It provides a simple and customizable way to show alerts, messages, and notifications to users in an Angular application.
Basic Toast Notification
This feature allows you to display a basic toast notification with a success message. The `ToastrService` is injected into the component, and the `success` method is called to show the notification.
import { ToastrService } from 'ngx-toastr';
constructor(private toastr: ToastrService) {}
showSuccess() {
this.toastr.success('Hello world!', 'Toastr fun!');
}
Custom Toast Notification
This feature allows you to display a custom toast notification with additional options such as timeout, close button, and progress bar. The `show` method is used with custom configuration.
import { ToastrService } from 'ngx-toastr';
constructor(private toastr: ToastrService) {}
showCustom() {
this.toastr.show('Custom message', 'Custom title', {
timeOut: 3000,
closeButton: true,
progressBar: true
});
}
Toast Notification with HTML Content
This feature allows you to display a toast notification with HTML content. The `enableHtml` option is set to true to allow HTML content in the message.
import { ToastrService } from 'ngx-toastr';
constructor(private toastr: ToastrService) {}
showHtml() {
this.toastr.success('<span style="color: red">Hello world!</span>', 'Toastr fun!', {
enableHtml: true
});
}
Toast Notification Positioning
This feature allows you to control the positioning of the toast notification. The `positionClass` option is used to set the position of the toast, such as 'toast-top-right'.
import { ToastrService } from 'ngx-toastr';
constructor(private toastr: ToastrService) {}
showTopRight() {
this.toastr.success('Hello world!', 'Toastr fun!', {
positionClass: 'toast-top-right'
});
}
angular-toastr is another Angular library for displaying toast notifications. It is similar to ngx-toastr but is designed for AngularJS (Angular 1.x) applications. It provides similar functionalities such as customizable toast messages, different types of notifications, and positioning options.
ng2-toastr is an Angular 2+ library for displaying toast notifications. It offers similar features to ngx-toastr, including customizable toast messages, different types of notifications, and various positioning options. However, ngx-toastr is more actively maintained and has a larger user base.
notyf is a JavaScript library for displaying toast notifications. It is framework-agnostic and can be used with any JavaScript framework, including Angular. It provides a simple API for showing notifications with different types and styles. Compared to ngx-toastr, notyf is more lightweight and has a simpler API, but it may lack some of the advanced customization options available in ngx-toastr.
DEMO: https://ngx-toastr.vercel.app
ViewContainerRef
*ngFor
. Fewer dirty checks and higher performance.Latest version available for each version of Angular
ngx-toastr | Angular |
---|---|
13.2.1 | 10.x 11.x |
14.3.0 | 12.x 13.x |
15.2.2 | 14.x. |
16.2.0 | 15.x |
17.0.2 | 16.x |
current | >= 17.x |
npm install ngx-toastr --save
@angular/animations
package is a required dependency for the default toast
npm install @angular/animations --save
Don't want to use @angular/animations
? See
Setup Without Animations.
step 1: add css
// regular style toast
@import 'ngx-toastr/toastr';
// bootstrap style toast
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions
@import 'ngx-toastr/toastr-bs4-alert';
// if you'd like to use it without importing all of bootstrap it requires
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// bootstrap 4
@import 'ngx-toastr/toastr-bs4-alert';
// boostrap 5
@import 'ngx-toastr/toastr-bs5-alert';
"styles": [
"styles.scss",
"node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]
step 2: add ToastrModule
to app NgModule
, or provideToastr
to providers, make sure you have BrowserAnimationsModule
(or provideAnimations
) as well.
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot(), // ToastrModule added
],
bootstrap: [App],
declarations: [App],
})
class MainModule {}
import { AppComponent } from './src/app.component';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideToastr } from 'ngx-toastr';
bootstrapApplication(AppComponent, {
providers: [
provideAnimations(), // required animations providers
provideToastr(), // Toastr providers
]
});
import { ToastrService } from 'ngx-toastr';
@Component({...})
export class YourComponent {
constructor(private toastr: ToastrService) {}
showSuccess() {
this.toastr.success('Hello world!', 'Toastr fun!');
}
}
There are individual options and global options.
Passed to ToastrService.success/error/warning/info/show()
Option | Type | Default | Description |
---|---|---|---|
toastComponent | Component | Toast | Angular component that will be used |
closeButton | boolean | false | Show close button |
timeOut | number | 5000 | Time to live in milliseconds |
extendedTimeOut | number | 1000 | Time to close after a user hovers over toast |
disableTimeOut | boolean | 'timeOut' | 'extendedTimeOut' | false | Disable both timeOut and extendedTimeOut when set to true . Allows specifying which timeOut to disable, either: timeOut or extendedTimeOut |
easing | string | 'ease-in' | Toast component easing |
easeTime | string | number | 300 | Time spent easing |
enableHtml | boolean | false | Allow html in message |
newestOnTop | boolean | true | New toast placement |
progressBar | boolean | false | Show progress bar |
progressAnimation | 'decreasing' | 'increasing' | 'decreasing' | Changes the animation of the progress bar. |
toastClass | string | 'ngx-toastr' | CSS class(es) for toast |
positionClass | string | 'toast-top-right' | CSS class(es) for toast container |
titleClass | string | 'toast-title' | CSS class(es) for inside toast on title |
messageClass | string | 'toast-message' | CSS class(es) for inside toast on message |
tapToDismiss | boolean | true | Close on click |
onActivateTick | boolean | false | Fires changeDetectorRef.detectChanges() when activated. Helps show toast from asynchronous events outside of Angular's change detection |
success, error, info, warning take (message, title, ToastConfig)
pass an
options object to replace any default option.
this.toastrService.error('everything is broken', 'Major Error', {
timeOut: 3000,
});
All individual options can be overridden in the global options to affect all toasts. In addition, global options include the following options:
Option | Type | Default | Description |
---|---|---|---|
maxOpened | number | 0 | Max toasts opened. Toasts will be queued. 0 is unlimited |
autoDismiss | boolean | false | Dismiss current toast when max is reached |
iconClasses | object | see below | Classes used on toastr service methods |
preventDuplicates | boolean | false | Block duplicate messages |
countDuplicates | boolean | false | Displays a duplicates counter (preventDuplicates must be true). Toast must have a title and duplicate message |
resetTimeoutOnDuplicate | boolean | false | Reset toast timeout on duplicate (preventDuplicates must be true) |
includeTitleDuplicates | boolean | false | Include the title of a toast when checking for duplicates (by default only message is compared) |
iconClasses = {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning',
};
Pass values to ToastrModule.forRoot()
or provideToastr()
to set global options.
// root app NgModule
imports: [
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
}),
],
import { AppComponent } from './src/app.component';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideToastr } from 'ngx-toastr';
bootstrapApplication(AppComponent, {
providers: [
provideToastr({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
}),
]
});
export interface ActiveToast {
/** Your Toast ID. Use this to close it individually */
toastId: number;
/** the title of your toast. Stored to prevent duplicates if includeTitleDuplicates set */
title: string;
/** the message of your toast. Stored to prevent duplicates */
message: string;
/** a reference to the component see portal.ts */
portal: ComponentRef<any>;
/** a reference to your toast */
toastRef: ToastRef<any>;
/** triggered when toast is active */
onShown: Observable<any>;
/** triggered when toast is destroyed */
onHidden: Observable<any>;
/** triggered on toast click */
onTap: Observable<any>;
/** available for your use in custom toast */
onAction: Observable<any>;
}
Put toasts in a specific div inside your application. This should probably be
somewhere that doesn't get deleted. Add ToastContainerModule
to the ngModule
where you need the directive available. Make sure that your container has
an aria-live="polite"
attribute, so that any time a toast is injected into
the container it is announced by screen readers.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule, ToastContainerModule } from 'ngx-toastr';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
ToastrModule.forRoot({ positionClass: 'inline' }),
ToastContainerModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Add a div with toastContainer
directive on it.
import { Component, OnInit, ViewChild } from '@angular/core';
import { ToastContainerDirective, ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-root',
template: `
<h1><a (click)="onClick()">Click</a></h1>
<div aria-live="polite" toastContainer></div>
`,
})
export class AppComponent implements OnInit {
@ViewChild(ToastContainerDirective, { static: true })
toastContainer: ToastContainerDirective;
constructor(private toastrService: ToastrService) {}
ngOnInit() {
this.toastrService.overlayContainer = this.toastContainer;
}
onClick() {
this.toastrService.success('in div');
}
}
Remove all or a single toast by optional id
toastrService.clear(toastId?: number);
Remove and destroy a single toast by id
toastrService.remove(toastId: number);
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your SystemJS config file, map
needs to tell the System loader where to
look for ngx-toastr
:
map: {
'ngx-toastr': 'node_modules/ngx-toastr/bundles/ngx-toastr.umd.min.js',
}
If you do not want to include @angular/animations
in your project you can
override the default toast component in the global config to use
ToastNoAnimation
instead of the default one.
In your main module (ex: app.module.ts
)
import { ToastrModule, ToastNoAnimation, ToastNoAnimationModule } from 'ngx-toastr';
@NgModule({
imports: [
// ...
// BrowserAnimationsModule no longer required
ToastNoAnimationModule.forRoot(),
],
// ...
})
class AppModule {}
That's it! Animations are no longer required.
Create your toast component extending Toast see the demo's pink toast for an example https://github.com/scttcper/ngx-toastr/blob/master/src/app/pink.toast.ts
import { ToastrModule } from 'ngx-toastr';
@NgModule({
imports: [
ToastrModule.forRoot({
toastComponent: YourToastComponent, // added custom toast!
}),
],
bootstrap: [App],
declarations: [App, YourToastComponent], // add!
})
class AppModule {}
ngOnInit() {
setTimeout(() => this.toastr.success('sup'))
}
showToaster() {
this.toastr.success('Hello world!', 'Toastr fun!')
.onTap
.pipe(take(1))
.subscribe(() => this.toasterClickedHandler());
}
toasterClickedHandler() {
console.log('Toastr clicked');
}
toastClass: 'yourclass ngx-toastr'
See: https://github.com/scttcper/ngx-toastr/issues/594.toastr original toastr
angular-toastr AngularJS toastr
notyf notyf (css)
MIT
FAQs
Toastr for Angular
The npm package ngx-toastr receives a total of 333,604 weekly downloads. As such, ngx-toastr popularity was classified as popular.
We found that ngx-toastr demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AI-generated slop reports are making bug bounty triage harder, wasting maintainer time, and straining trust in vulnerability disclosure programs.
Research
Security News
The Socket Research team investigates a malicious Python package disguised as a Discord error logger that executes remote commands and exfiltrates data via a covert C2 channel.
Research
Socket uncovered npm malware campaign mimicking popular Node.js libraries and packages from other ecosystems; packages steal data and execute remote code.