I am trying to use ng2-toastr in my angular 2 app. I have followed all the instructions but the toastr fails to show up without any console error. I have also read somewhere that ng-toastr no longer works with angular 2 but have not found any valid documentation on that. I have searched for similar questions but have not found any suitable answer to my problem. any help would be appreciated.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import{ ToastModule} from 'ng2-toastr/ng2-toastr';
import { BrowserAnimationsModule} from '@angular/platform-
browser/animations';
import "hammerjs"
import { CoreModule } from './core/core.module';
import { MODULE_ROUTES, MODULE_COMPONENTS } from './app.router'
@NgModule({
declarations: [
MODULE_COMPONENTS
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(MODULE_ROUTES),
BrowserAnimationsModule,
CoreModule,
ToastModule.forRoot()
],
providers: [ ],
bootstrap: [MODULE_COMPONENTS]
})
export class AppModule { }
app.component.ts
import { Component, ViewContainerRef } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
@Component({
selector: 'wow-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor( public toastr: ToastsManager, private vRef: ViewContainerRef)
{
this.toastr.setRootViewContainerRef(vRef);
console.log(this.toastr);
}
}
This is how I am calling toastr method in one of my components:
login() {
this.user_service.login(this.user).then((response) => {
console.log(response)
this.toastrManager.success('Successfully Logged in.')
}
package.json
"dependencies": {
"@angular/animations": "^4.1.3",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular2-image-upload": "^0.6.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"ng2-toastr": "^4.1.2",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.0.3",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38"
}
I have also added "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
in my angular-cli.json.
this is console.log
[UPDATE]
I finally managed to solve the problem, thought to share it with all those who are stuck in the same issue. Please change the following code
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
to
import { ToastsManager } from 'ng2-toastr';
since, the ToastsManager is exported from the parent directory and not from the subdirectory (atleast, in the versions of dependencies I am using).