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.
ng6-toastr
Advanced tools
Readme
The lib is inspired by [angular-toastr] (https://github.com/Foxandxss/angular-toastr), and will show bootstrap-like toasts. Please update Modern Angular (v4.0.0+) latest version to avoid any unexpected issues. We jumped version from v1.x to v4.x in order to match Angular version.
NOTE 1: In order to use animation, please include Animation Module from angular v4.x
to your project:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
imports: [BrowserModule, BrowserAnimationsModule, ToastModule.forRoot()],
...
})
export class AppModule {
}
NOTE 2: Version 4.0.x and above works with Angular v4 (Tested with Angular v4.0.0 and Angular-Cli v1.0.0).
Use v1.6.0 if you are working with angular v2.x
.
Install ng2-toastr using npm:
npm install ng2-toastr --save
Include js and css files in html header
<link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet" />
<script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script>
NOTE: If you are using angular-cli you do not need to include 'node_modules/ng2-toastr/bundles/ng2-toastr.min.js', since adding 'import {ToastModule} from 'ng2-toastr/ng2-toastr';' to your module file (below) will allow it to be autoloaded.
Add ToastModule into your AppModule class. app.module.ts
would look like this:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {ToastModule} from 'ng2-toastr/ng2-toastr';
@NgModule({
imports: [BrowserModule, ToastModule.forRoot()],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {
}
Inject 'ToastsManager' class in your component class.
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
@Component({
selector: 'awesome-component',
template: '<button class="btn btn-default" (click)="showSuccess()">Toastr Tester</button>'
})
export class AppComponent {
constructor(public toastr: ToastsManager, vcr: ViewContainerRef) {
this.toastr.setRootViewContainerRef(vcr);
}
showSuccess() {
this.toastr.success('You are awesome!', 'Success!');
}
showError() {
this.toastr.error('This is not good!', 'Oops!');
}
showWarning() {
this.toastr.warning('You are being warned.', 'Alert!');
}
showInfo() {
this.toastr.info('Just some information for you.');
}
showCustom() {
this.toastr.custom('<span style="color: red">Message in red.</span>', null, {enableHTML: true});
}
}
By default, the toastr will show up at top right corner of the page view, and will automatically dismiss in 3 seconds. You can configure the toasts using ToastOptions class. Currently we support following options:
Determines how long an auto-dismissed toast will be shown. Defaults to 5000 miliseconds.
Determine how a displayed toaster can be dismissed. Allowed values are: 'auto', 'click', 'controlled' (value should all be lowercase).
toastLife
). This is default value.Determines whether new toast should show up on top of previous toast Defaults to false.
Determines whether toast should include 'x' close button. Defaults to false.
Determines maximum number of toasts can be shown on the page in the same time. Defaults to 5.
Determines where on the page the toasts should be shown. Here are list of values:
CSS class for message within toast.
CSS class for title within toast.
You have following choice: 'fade', 'flyLeft' or 'flyRight'.
animate: null
to disable animations.Allow input of message to be HTML. Default to false.
Use dependency inject for custom configurations. You can either inject into app.module.ts
or any component class.
// custom-option.ts
import {ToastOptions} from 'ng2-toastr';
export class CustomOption extends ToastOptions {
animate = 'flyRight'; // you can override any options available
newestOnTop = false;
showCloseButton = true;
}
// app.module.ts
import { CustomOption } from './custom-option';
@NgModule({
declarations: [ ... ],
imports: [
...
ToastModule.forRoot(),
],
providers: [
{provide: ToastOptions, useClass: CustomOption},
...
],
bootstrap: [ ... ]
})
You can also override dismiss
, toastLife
, enableHTML
, titleClass
, messageClass
options for individual toast:
this.toastr.sucess('This toast will dismiss in 10 seconds.', null, {toastLife: 10000});
this.toastr.info('<span style="color: red">Message in red.</span>', null, {enableHTML: true});
NOTE: specify a value for toastLife
overrides dismiss
and always set dismiss = 'auto'
.
Should you need specific logic to determine when a toaster will be dismissed you can store the displayed Toast
.
Be cautious when the toaster can be dismissed in other ways such as dismiss: 'auto'
or dismiss: 'click'
.
this.toastr.success('You are awesome!', 'Success!', {dismiss: 'controlled'})
.then((toast: Toast) => {
setTimeout(() => {
this.toastr.dismissToast(toast);
}, 10000);
});
onClickToast
observable on ToastManager
instanceNow you can added custom data object to each toast.
Following example shows how to allow user to click on toast to navigate to new path:
this.toastr.onClickToast()
.subscribe( toast => {
if (toast.data && toast.data.url) {
// navigate to
this.router.navigate(toast.data.url);
}
});
this.toastr.success('You are awesome! Click to view details.', 'Success!', {data: {url: '/path/to/successUrl'}});
Each Toast
instance includes timeoutId
, which allows developer to stop auto-dismiss.
if (toast.timeoutId) {
clearTimeout(toast.timeoutId);
// do something before dismiss the toast
this.toastr.dismiss(toast);
}
> cd demo/ngcli && npm install
> ng serve
Then navigate your browser to http://localhost:4200
> cd demo/webpack && npm run install
> npm run build
> npm start
FAQs
bootstrap style of toast for modern angular
The npm package ng6-toastr receives a total of 216 weekly downloads. As such, ng6-toastr popularity was classified as not popular.
We found that ng6-toastr 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.