show() is not a method in MDB Collapse

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

Revature Pro priority asked 5 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)

Add comment

Revature Pro priority answered 5 years ago

0 0 Best answer

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.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Did the problem with toggle exist in previous versions? Please check if our basic example work for you:
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><button mdbBtn color="primary" class="waves-light" type="button" (click)="test.toggle()" mdbWavesEffect>

Toggle collapse

</button></pre>
</div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><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>

</pre>
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).

Please insert min. 20 characters.

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).

Add comment

Revature Pro priority answered 5 years ago

0 0 Best answer

Toggle:
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><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</pre>
Show or Hide:
<pre class="code-toolbar grey lighten-2 p-3 mb-3">setCollapse() {
for (let i = 0; i < this.internAttempts.toArray().length; i++) {
this.internAttempts.toArray()[i].show();
}
}</pre>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">resetCollapse() {
for (let i = 0; i < this.internAttempts.toArray().length; i++) {
this.internAttempts.toArray()[i].hide();
}
}</pre>

Please insert min. 20 characters.

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();
}
}

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

Revature Pro priority answered 5 years ago

0 0 Best answer

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.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Revature Pro priority commented 5 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 5 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Revature Pro

205Support score
16Questions 12Answers 1Snippets