Use toastr with angular2

Question

I use this node package link

Following the instructions, the typescript compiler gets out of sight. I think the problem is the same as described here , but I cannot find a workaround.

Any help?

thanks a lot

Answer 1

This means that you can directly use the toastr object directly without importing it like this: import * as toastr from '...'; .

However, to avoid a compilation error, you need to enable the corresponding vise:

 /// <reference path="./toaster.d.ts" /> 

Here is a way to use Toastr in a component:

 /// <reference path="./toaster.d.ts" /> import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: ` <div (click)="displayToastr()">Display Toastr</div> ` }) export class AppComponent { constructor() { toastr.options = { positionClass: 'toast-bottom-right' }; } displayToastr() { toastr.info('message'); } } 

Here is the corresponding plunkr: https://plnkr.co/edit/wzdoisKBrZYTeSX8r7Nd?p=preview .

Answer 2

• Create a toaster service under any folder inside your application (preferably a shared one) and add the code below

   import { OpaqueToken } from '@angular/core' export let Toaster_Token = new OpaqueToken('toastr'); 

• Import it into your application module below

   import { Toaster_Token } from './ToasterService'; 

• Declare a variable that has the window refrence .toastr toastr.js as

   declare let toastr : any; 

• Add the code below to the providers array

   { provide : Toaster_Token , useValue : toastr } 

• In your component, import ToasterService and Inject from angular / core, as shown below

   import { Toaster_Token } from './ToasterService'; import { Inject} from '@angular/core'; 

• Your constructor is introduced by this service as

   constructor(@Inject( Toaster_Token ) private _toasterService : any){ } 

• Use toaster methods like

   this._toasterService.success('This works'); 

Live demo

Answer 3

if you use angular2 -toaster (npm install angular2 -toaster)

in html

<button class='btn btn-bar btn-warn' (click)='testToaster()'>testToaster</button>

in the .js component

 import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { ToasterModule, ToasterService, BodyOutputType } from "angular2-toaster"; @NgModule({ imports: [ BrowserAnimationsModule, ToasterModule], }) export class Democlass extends BaseComponent implements OnInit { constructor(..., private toasterService: ToasterService) { . . .} public testToaster() { this.toasterService.pop("info", "Args Title info", "Args Body <p/> sdf") .bodyOutputType = BodyOutputType.TrustedHtml; } 

you can also use other toast properties like

  let toast = this.toasterService.pop("info", "demo Title info", "demo Body <p/> sdf"); toast.bodyOutputType = BodyOutputType.TrustedHtml; // these will be used toast.title = "Actual tite"; toast.body = "new html body <i>italic</i><hr/>notes"; // toast.clickHandler = ... // toast.type = "error"; // toast.timeout = 20; // ... 

Answer 4

You just need to add <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

toastr - plunker

 import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: ` <button (click)="displayToastr()">Display Toastr</button> ` }) export class AppComponent { displayToastr() { toastr.info('I am here for few seconds'); } }