1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB 8 - mdbBtn throws element[NATIVE_ADD_LISTENER]

itay pro asked 5 years ago

“element[NATIVE_ADD_LISTENER] is not a function” is thrown on:

<a mdbBtn floating="true" color="red" mdbFixedCaption="title" [collapseButton]="button" class="waves-light" (click)="menuClicked('clicked')" mdbWavesEffect>

Removing the line removes the error.

Error is thrown when view with mdbBtn is rendered.

Same code worked perfectly in ver 7

It might be related to platform-browser. In package.json, I use:

"@angular/platform-browser": "^8.1.0",
"@angular/platform-browser-dynamic": "^8.1.0",

Chrome console log to follow:

DashboardFixedMenuBuComponent.html:34 ERROR TypeError: element[NATIVE_ADD_LISTENER] is not a function at DomEventsPlugin.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomEventsPlugin.addEventListener (platform-browser.js:1392) at EventManager.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.EventManager.addEventListener (platform-browser.js:848) at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.listen (platform-browser.js:1167) at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.listen (animations.js:257) at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.listen (core.js:30977) at FixedButtonCaptionDirective.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.FixedButtonCaptionDirective.ngAfterViewInit (ng-uikit-pro-standard.js:618) at callProviderLifecycles (core.js:22081) at callElementProvidersLifecycles (core.js:22055) at callLifecycleHooksChildrenFirst (core.js:22045) at checkAndUpdateView (core.js:29936) at callViewAction (core.js:30168) at execEmbeddedViewsAction (core.js:30131) at checkAndUpdateView (core.js:29928) at callViewAction (core.js:30168) at execComponentViewsAction (core.js:30110) at checkAndUpdateView (core.js:29933) at callViewAction (core.js:30168) at execEmbeddedViewsAction (core.js:30131) at checkAndUpdateView (core.js:29928) at callViewAction (core.js:30168) at execComponentViewsAction (core.js:30110) at checkAndUpdateView (core.js:29933) at callViewAction (core.js:30168) at execEmbeddedViewsAction (core.js:30131) at checkAndUpdateView (core.js:29928) at callViewAction (core.js:30168) at execComponentViewsAction (core.js:30110) at checkAndUpdateView (core.js:29933) at callViewAction (core.js:30168) at execEmbeddedViewsAction (core.js:30131) at checkAndUpdateView (core.js:29928) at callViewAction (core.js:30168) at execComponentViewsAction (core.js:30110) at checkAndUpdateView (core.js:29933) at callViewAction (core.js:30168) at execEmbeddedViewsAction (core.js:30131) at checkAndUpdateView (core.js:29928) at callViewAction (core.js:30168) at execComponentViewsAction (core.js:30110) at checkAndUpdateView (core.js:29933)

Damian Gemza staff commented 5 years ago

Thanks for your report. We have to debug this. We'll let you know when we'll fix it.

itay pro commented 5 years ago

This is a critical bug, preventing me from deployment Please also let me know if you think it is not on your side and if it is, when it should be fixed

itay pro answered 5 years ago

BETTER

Since my entire menu is optional, buttonEl is undefined at start

<div *ngIf="bShowMenu" class="fixed-action-btn">

And the new error is:

FixedMenuComponent.html:39 ERROR TypeError: Cannot read property 'nativeElement' of undefined

This might help: https://stackoverflow.com/questions/56359504/how-should-i-use-the-new-static-option-for-viewchild-in-angular-8

However, after removing *ngIf, it works and even resolved the jumping issue from: https://mdbootstrap.com/support/angular/mdb-8-mdbbtn/

Thanks for the quick response

Arkadiusz Idzikowski staff answered 5 years ago

We need to update the component code in order to solve this problem. The fix will be available in the next version (22 July).

However, there is a workaround you can use for now. Please note that this is only temporary solution.

You need to add ViewChild decorator and add nativeElement of the button to the collapseButton input. Here is an example:

HTML:

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">

  <a mdbBtn floating="true" size="lg" color="red" class="waves-light" #button mdbWavesEffect (click)="fixed.toggle($event)">
    <mdb-icon fas icon="pencil-alt"></mdb-icon>
  </a>

  <div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed="bs-collapse">
    <a mdbFixedCaption="Caption 1" [collapseButton]="buttonEl.nativeElement" mdbBtn floating="true" color="red" class="waves-light" mdbWavesEffect><mdb-icon fas icon="star"></mdb-icon></a>
    <a mdbFixedCaption="Caption 2" [collapseButton]="buttonEl.nativeElement" mdbBtn floating="true" color="yellow" class="darken-1 waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon></a>
    <a mdbFixedCaption="Caption 3" [collapseButton]="buttonEl.nativeElement" mdbBtn floating="true" color="green" class="waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon></a>
    <a mdbFixedCaption="Caption 4" [collapseButton]="buttonEl.nativeElement" mdbBtn floating="true" color="blue" class="waves-light" mdbWavesEffect><mdb-icon fas icon="shopping-cart"></mdb-icon></a>
  </div>

</div>

TS:

@ViewChild('button', { static: true, read: ElementRef }) buttonEl: ElementRef;
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No
Tags
mdbbtn
About author
itay
Pro User 2474Support score
150Questions 196Answers 0Snippets