Clr-accrodion not working as expected with ngFor

[symeonmattes]

Hi,

I have been trying to find a solution on accordion on clarity but without any success. The issue that I have is:

in component.ts:

info = [{name: '1'}, {name: '2'}];

getInfo(): any[] {
 return [{name: '1'}, {name: '2'}];
}

in component.html:

First
<clr-accordion>
	<clr-accordion-panel  *ngFor="let i of getInfo()">
		<clr-accordion-title>Item {{i.name}}</clr-accordion-title>
		<clr-accordion-content *clrIfExpanded>Content 1</clr-accordion-content>
	</clr-accordion-panel>
</clr-accordion>


Second
<clr-accordion>
	<clr-accordion-panel  *ngFor="let i of info">
		<clr-accordion-title>Item {{i.name}}</clr-accordion-title>
		<clr-accordion-content *clrIfExpanded>Content 1</clr-accordion-content>
	</clr-accordion-panel>
</clr-accordion>

The Second is working as expected. However the first although it shows the items on click it doesn't open the accordion. Any ideas?

Clarity project:

• [ 5.4.0] CDS core
• [5.4.- ] Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• v5.x

Framework:

• [ X] Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 10,11,12

Device:

• Type: HP
• OS: Windows 10
• Browser Chrome
• Version 95.0.4638.54

[bbogdanov]

Hi @symeonmattes,

Sorry for the delay.

Using ngFor with a function execution inside an Angular template is almost always a bad pattern. What happens there is that when you register a event on the document (like clicking on the panel to open) the change detection runs and reruns all the functions that are used inside the template. Having this when you click to open the panel a new array is provided to the ngFor and the panels get recreated. The panel is actually opening but ngFor recreates the view and it feels like the panel is not opening but actually the panel you clicked on is destroyed and a new one was created on its place.

What you can do is create a pipe to run the function for you if you think the function will return the same data every time you run it. But I believe this is not the case so I would encourage you minimize the function execution inside a template (mostly for performance reasons) and use another approach e.g. using a Observer with asnyc pipe inside the ngFor

I'm leaving an example below using the pipe
https://stackblitz.com/edit/clarity-light-theme-v5-qqtzwr?file=src%2Fapp%2Fapp.component.html