Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
toastr-ng2
Advanced tools
Readme
DEMO: https://scttcper.github.io/toastr-ng2/
*ngFor
. Fewer dirty checks and higher performance.npm install toastr-ng2 --save
step 1: copy toast css to your project. If you are using sass you can import the css.
@import 'node_modules/toastr-ng2/toastr';
If you are using angular-cli you can add it to your angular-cli.json
"styles": [
"styles.scss",
"node_modules/toastr-ng2/toastr.css"
]
step 2: add ToastrModule to app NgModule
import { ToastrModule } from 'toastr-ng2';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule,
ToastrModule.forRoot(), // ToastrModule added
],
bootstrap: [App],
declarations: [App],
})
class MainModule {}
Success:
import { ToastrService } from 'toastr-ng2';
@Component({
...
})
export class YourComponent {
constructor(private toastrService: ToastrService) {}
showSuccess() {
this.toastrService.success('Hello world!', 'Toastr fun!');
}
}
There's global options and individual toast options. All individual toast options are included in the global options. See file toastr-config.ts
The toastComponent can be inherited and modified. See the pink toast in the demo. It has a different animation and inline style.
maxOpened: number = 0; // max toasts opened. Toasts will be queued
autoDismiss: boolean = false; // dismiss current toast when max is reached
iconClasses = { // classes used on toastr service methods
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning',
};
newestOnTop: boolean = true; // new toast placement
preventDuplicates: boolean = false; // block duplicate messages
toastComponent = Toast; // the angular 2 component that will be used
closeButton: boolean = false; // show close button
timeOut: number = 5000; // time to live
enableHtml: boolean = false; // allow html in message. (UNSAFE)
extendedTimeOut: number = 1000; // time to close after a user hovers over toast
progressBar: boolean = false; // show progress bar
toastClass: string = 'toast'; // class on toast
positionClass: string = 'toast-top-right'; // class on toast
titleClass: string = 'toast-title'; // class inside toast on title
messageClass: string = 'toast-message'; // class inside toast on message
tapToDismiss: boolean = true; // close on click
onActivateTick: boolean = false; // fire a ApplicationRef.tick() from the toast component when activated. Might help show the toast if you are firing it from a websocket
NEW FOR VERSION > 3 Option 1: Pass values to ToastrModule.forRoot
// your NgModule
imports: [
ToastrModule.forRoot({timeOut: 0}),
],
Option 2: Inject ToastrConfig, typically in your root component, and customize the values.
import { ToastrConfig } from 'toastr-ng2';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(toastrConfig: ToastrConfig) {
toastrConfig.timeOut = 100;
}
}
success, error, info, warning take (message, title, ToastConfig)
pass a ToastConfig object to replace several default settings.
// OPTIONAL: import the ToastConfig interface
import { ToastConfig } from 'toastr-ng2';
const errorConfig: ToastConfig = {timeOut: 10000};
this.toastrService.error('everything is broken', 'title is optional', errorConfig);
export interface ActiveToast {
toastId: number; // Your Toast ID. Use this to close it individually
message: string; // the message of your toast. Stored for prevent duplicate reasons
portal?: any; // a reference to the component see portal.ts
toastRef?: ToastRef<any>; // a reference to your toast
onShown?: Observable<any>; // triggered when toast is active
onHidden?: Observable<any>; // triggered when toast is destroyed
onTap?: Observable<any>; // triggered on click
}
Toastr Service will return undefined if prevent duplicates is on.
Put toasts in a specific div inside your application. This should probably be somewhere that doesn't get deleted.
Add ToastContainerModule.forRoot()
to ngModule after the ToastrModule.forRoot()
Add a div with toastContainer
directive on it.
import { ToastContainerDirective } from 'toastr-ng2';
@Component({
selector: 'app-root',
template: `<div toastContainer class="toast-top-right"></div>`,
})
export class AppComponent implements OnInit {
@ViewChild(ToastContainerDirective) toastContainer: ToastContainerDirective;
constructor(private toastrService: ToastrService) {}
ngOnInit() {
this.toastrService.overlayContainer = this.toastContainer;
this.toastrService.success('in div');
}
}
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 toastr-ng2
:
map: {
'toastr-ng2': 'node_modules/toastr-ng2/toastr.umd.js',
}
angular-toastr and the original toastr.
MIT
FAQs
Toastr for Angular 2
The npm package toastr-ng2 receives a total of 56 weekly downloads. As such, toastr-ng2 popularity was classified as not popular.
We found that toastr-ng2 demonstrated a not healthy version release cadence and project activity because the last version was released 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.