Topic: my accordion does not expand dynamically.
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.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
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...