Topic: Accordion collapse binding not working

chris-clarkson premium asked 5 years ago


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.


Bartosz Termena staff commented 5 years ago

Could you show me your TS code (mainly I mean isCollapsed method)?


chris-clarkson premium commented 5 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.


Bartosz Termena staff answered 5 years ago


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 5 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 5 years ago

@chris-clarkson

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.



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

  • 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
Tags