Topic: show() is not a method in MDB Collapse

Revature Pro priority asked 4 years ago


Hi, We are using MDB Angular Pro version. Collapse is not working in current  version(6.2.3). It was working in previous versions. Now it is showing collapse.show() is not a method.
in IE11 : 
ERROR TypeError: Object doesn't support property or method 'show'

in Chrome:
RegradingComponent.html:388 ERROR TypeError: this.internAttempts.toArray(...)[i].show is not a function
    at RegradingComponent.push../src/app/training/regrading/regrading.component.ts.RegradingComponent.setCollapse (regrading.component.ts:319)
    at RegradingComponent.push../src/app/training/regrading/regrading.component.ts.RegradingComponent.loadViewByStudent (regrading.component.ts:187)
    at Object.eval [as handleEvent] (RegradingComponent.html:388)
    at handleEvent (core.js:9947)
    at callWithDebugContext (core.js:11040)
    at Object.debugHandleEvent [as handleEvent] (core.js:10743)
    at dispatchEvent (core.js:7406)
    at core.js:7850
    at HTMLLIElement.<anonymous> (platform-browser.js:1140)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

 

Revature Pro priority answered 4 years ago


Hi Arek, We have shared the application with full setup. Kindly look into your email and help us to resolve this issue. Thanks in advance.

Arkadiusz Idzikowski staff answered 4 years ago


Did the problem with toggle exist in previous versions? Please check if our basic example work for you:
<button mdbBtn color="primary" class="waves-light" type="button" (click)="test.toggle()" mdbWavesEffect>

Toggle collapse

</button>
<div class="" mdbCollapse [isCollapsed]="false" #test="bs-collapse">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
</div>

I would need full code for this example (both html and ts) and more informations about reproduction steps in order to recreate this problem in my app (if that's possible, you can also send me an example app to a.idzikowski@mdbootstrap.com).

Revature Pro priority answered 4 years ago


Toggle:
<li class="list-group-item list-users" *ngFor="let info of internRegradingInfo;" [class.active]='info.internId == selectedTraineeId' (click)="internAttempts.toggle();">{{info.firstName, info.lastName}}<div [hidden]="info.historyResponse?.length <= 1" [mdbCollapse]="true" #internAttempts="bs-collapse"><ul class="list-item-group"><li class="list-group-item" *ngFor="let history of info.historyResponse;let i = index;" [class.active]='info.internId == selectedTraineeId && i == selectedAttempt' (click)="selectAttempt(index, i, info);">Attempt {{i + 1}}</li></ul></div></li
Show or Hide:
setCollapse() {
for (let i = 0; i < this.internAttempts.toArray().length; i++) {
this.internAttempts.toArray()[i].show();
}
}
resetCollapse() {
for (let i = 0; i < this.internAttempts.toArray().length; i++) {
this.internAttempts.toArray()[i].hide();
}
}

Arkadiusz Idzikowski staff answered 4 years ago


Could you show me the code of mdb-collapse component?

Revature Pro priority answered 4 years ago


Thanks Arek, We updated to 6.2.4, now the show and hide methods are working fine. But, the toggle() is not working and we couldn't see any errors on the console also. Actually, we need all the methods Kindly help us to resolve this issue, Thanks in advance.

Arkadiusz Idzikowski staff answered 4 years ago


Dear sreenathb, Thank you for reporting this problem. It will be fixed in next version (september 10). Regards, Arek

Revature Pro priority commented 4 years ago

Hi Arek, You mentioned, it will be fixed in next version (september 10). Is it september 10 or October 10 ?.

Arkadiusz Idzikowski staff commented 4 years ago

I wanted to write about September 24, I dont' know why i put this '10' there. Sorry for the confusion. Anyway, version 6.2.4 is now available. Please upgrade and collapse methods should work fine.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Desktop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No