MDB 8 - mdbBtn throws element[NATIVE_ADD_LISTENER]

web
mobile

Topic: MDB 8 - mdbBtn throws element[NATIVE_ADD_LISTENER]

mdb2 pro asked 3 months 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 3 months ago

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


mdb2 pro commented 3 months 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


Arkadiusz Idzikowski staff answered 3 months 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;

mdb2 pro answered 3 months 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


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No
Tags