Skip to content

[TOASTR] ViewDestroyedError: Attempt to use a destroyed view: detectChanges #2429

Open
@tasham16

Description

@tasham16

Issue type

I'm submitting a ... (check one with "x")

  • bug report
  • feature request

Issue description

Current behavior:

When using the toastr, the first click of a button triggering the toastr works fine, however the second, and subsequent clicks generate a ViewDestroyedError. The Toastr itself still renders but the following error also displays in the console:

button.component.html:4 ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
at viewDestroyedError (core.js:19641)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:30040)
at checkAndUpdateView (core.js:29439)
at callWithDebugContext (core.js:30309)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:30011)
at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:20686)
at patch (index.js:1874)
at NbToastContainer.push../node_modules/@nebular/theme/fesm5/index.js.NbToastContainer.updateContainer (index.js:19154)
at NbToastContainer.push../node_modules/@nebular/theme/fesm5/index.js.NbToastContainer.destroy (index.js:19102)
at index.js:19147

Expected behavior:

The toastr should be able to be clicked multiple times and destroy correctly without the error.

Steps to reproduce:

Set up a button trigger that on click calls the simple showToast function from the documentation. Look in the devTools on chrome and the error should show up.

Related code:

insert short code snippets here

My code is set up like this:
Component.ts
showToast() { this.index ++; const duration = 2000; let status = this.toaststatus; let position = this.position; this.toastrService.show( this.message, this.title || 'Title', { position, status, duration }); }

html
<button nbButton (click)="showtoastr ? showToast() : ''">{{label}}</button>

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Angular, Nebular

Nebular version: '4.6.0', Angular version: 8.2

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions