Topic: Accordion collapse binding not working
I am using an ngFor on the mdb accordion and binding the collapsed property. This works until the ngfor data changes and then the collapsed binding no longer seems to work.
<mdb-accordion-item *ngFor="let item of sidebars;" [customClass]="'border-0 p-0'" [collapsed]="isCollapsed(item.id)">
I have put a console.log within the isCollapsed method. This logs fine until I change the contents of sidebars and then the logs appear to stop.
Dear @chris-clarkson
I don't quite understand why your method doesn't work, could you explain it to me better? For ex. here is my code, with isCollapsed and changeData methods:
HTML:
<mdb-accordion [multiple]="false">
<mdb-accordion-item
[customClass]="'border-0 p-0'"
[collapsed]="isCollapsed()"
*ngFor="let item of sidebars"
>
<mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
<mdb-accordion-item-body>
{{ item }}
</mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>
<hr />
<div [ngStyle]="{ 'background-color': sidebars[0] < 5 ? 'green' : 'red' }">
Number in accordion: {{ sidebars[0] }}
</div>
<br />
<button (click)="changeData()">Click to Change Data</button>
TS:
sidebars: number[];
ngOnInit(): void {
this.sidebars = [4];
this.isCollapsed();
}
changeData() {
this.sidebars = [Math.floor(Math.random() * 9)];
}
isCollapsed() {
if (this.sidebars[0] < 5) {
console.log('false');
return false;
} else {
console.log('true');
return true;
}
}
Accordion after change data seems to work, and console.logs are displayed.
I am waiting for a reply with more details.
Best Regards, Bartosz.
chris-clarkson premium commented 4 years ago
I have looked at it a bit further and suspect it may be some kind of Angular issue but I am not sure.
I am calling the setActiveSidebar() method to change the test value. If I use the below it does not work, the correct navitem does not expand as expected.
private setActiveSidebar(sidebarId) { let sidebar = this.findSidebarById(sidebarId); this.testValue = sidebar.parentId; }
public isCollapsed(sidebarId) { if (sidebarId == this.testValue) { return false; } else { return true; } }
However if I change the testValue myself as follows, this does work. I have checked the value in first case and it matches the same as setting it myself. Any ideas what could be happening?
private setActiveSidebar(sidebarId) { let sidebar = this.findSidebarById(sidebarId); this.testValue = 20000; }
public isCollapsed(sidebarId) { if (sidebarId == this.activeSidebarGroupId) { return false; } else { return true; } }
Bartosz Termena staff commented 4 years ago
Can you try console.log(sidebar.parentId) in setActiveSedebar() ?
Just before being assigned to this.testValue, like here:
private setActiveSidebar(sidebarId) { let sidebar = this.findSidebarById(sidebarId);
console.log(sidebar.parentId);
this.testValue = sidebar.parentId; }
It should show you for ex. undefined.
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.1.1
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Bartosz Termena staff commented 4 years ago
Could you show me your TS code (mainly I mean isCollapsed method)?
chris-clarkson premium commented 4 years ago
Sure, my is collapsed method currently looks like this
public isCollapsed(sidebarId) { if (sidebarId == this.frameworkService.currentSidebar.parentId) { console.log('false'); return false; } else { console.log('true'); return true; } }
I previously had the check in the html, I only created this method to try and troubleshoot the problem and that's where I found that the console logs are not being generated after the property used in ngFor is changed.