Topic: my accordion does not expand dynamically.

yeisonvelez11 free asked 5 years ago


I think the documentation is simple, I must put a boolean in [collapsed], but in my case only the arrow changes, but the accordion is not expanded. I have a somewhat extensive code, so I preferred to create a brief example with my problem. I need open an accordion from .ts

<mdb-accordion  [multiple]="true"  *ngFor="let  item of  array"  >
   <mdb-accordion-item [collapsed]="!item.check" >
      <mdb-accordion-item-head> 
                 . 
                 .
<a (click)="fn_openAcordion(0)">1</a>
<a (click)="fn_openAcordion(1)">2</a>
<a (click)="fn_openAcordion(3)">1</a>

//this is the response of webservice that I cant modify
this.array=[
 {"name":"pedro"},
 {"name":"juan "},
 {"name":"miguel"},
]  


// I add boolean var
for(var i in this.array){
  this.array[i]["check"]=false;
}

fn_openAcordion(index){
//only changes the arrow of the accordion
 this.array[0].check=true;
}

Is strange that the accordion does not expand, I would like to know if there is a way to correct this or have a plan b. The only thing that is affected is the arrow indicating the accordion, but the accordion does not expand.


Damian Gemza staff commented 5 years ago

Dear @yeisonvelez11

Do you want to open accordion dynamically after loading the page (with [collapsed] input)? Or you want to open accordion with the button? Please describe it.


yeisonvelez11 free commented 5 years ago

yes with [collapsed] input as first way, and as plan b open with the button...


Arkadiusz Idzikowski staff answered 5 years ago


The [collapsed] input will work only when it's boolean value is available on component init (we need to change something in the components internal code in order to make that work dynamically).

For now you can use accordion item toggle() method to toggle the items programatically. Here is how to do that:

HTML:

<mdb-accordion [multiple]="true">
  <mdb-accordion-item #item [collapsed]="collapsed">
    <mdb-accordion-item-head>Accordion item heading</mdb-accordion-item-head>
    <mdb-accordion-item-body
      >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti
      aliquid, vitae sint, veniam alias perspiciatis recusandae a placeat nihil
      numquam accusantium tenetur consequatur beatae possimus odio repellendus
      sapiente cum ea?</mdb-accordion-item-body
    >
  </mdb-accordion-item>
  <mdb-accordion-item #item [collapsed]="collapsed">
    <mdb-accordion-item-head>Accordion item heading</mdb-accordion-item-head>
    <mdb-accordion-item-body
      >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti
      aliquid, vitae sint, veniam alias perspiciatis recusandae a placeat nihil
      numquam accusantium tenetur consequatur beatae possimus odio repellendus
      sapiente cum ea?</mdb-accordion-item-body
    >
  </mdb-accordion-item>
  <mdb-accordion-item #item [collapsed]="collapsed">
    <mdb-accordion-item-head>Accordion item heading</mdb-accordion-item-head>
    <mdb-accordion-item-body>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti
      aliquid, vitae sint, veniam alias perspiciatis recusandae a placeat nihil
      numquam accusantium tenetur consequatur beatae possimus odio repellendus
      sapiente cum ea?</mdb-accordion-item-body
    >
  </mdb-accordion-item>
</mdb-accordion>

<button mdbBtn color="primary" (click)="toggleCollapsed()">Toggle collapsed</button>

TS:

  @ViewChildren('item') accordionItems: QueryList<SBItemComponent>;

  collapsed = false;

  toggleCollapsed() {
    this.collapsed = !this.collapsed;
    this.accordionItems.forEach((item: SBItemComponent) => {
      item.toggle(this.collapsed);
    });
  }

Of course you can change the template variable from '#item' to some other name and use ViewChild decorator instead of ViewChildren to handle toggling only for the specific item.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: WEB
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No
Tags