How to use ngFor for an accordion to loop multiple times in Angular

I have the below code for creating accordion using plus and minus icons. I have handled the toggle functionality as well. But now I want to loop this inside ngFor for multiple set of elements . I am not sure how to do this.
Basically i have a resultArray which is a json . I need to loop through resultArray json to get the heading and description and place it as accordion heading and accordion description. I am not sure how to replace the accord.id dynamically.

<div *ngFor = "let resulArray of resultArray">
<div *ngFor="let accord of accordian;">
<div (click)="toggle(accord.id)" id="accordionTitle{{accord.id}}" class="accordionTitle active">{{accord.label}}
<i class="fa fa-minus" id="minus{{accord.id}}"></i>
</div>
<div id="{{accord.id}}" *ngIf="accord.id == 0" class="hidden-data show">
</div>
</div>


The toggle below is to apply styles and change of icons from plus to minus to the accordion. When toggle function is called

this.accordian = [{
id: 0, label: 'Accordion title'
}];

toggle(id) {
this.x = document.getElementById(id);
this.y = document.getElementById('accordionTitle' + id);
if (this.x.className.indexOf('show') === -1) {
this.x.className += ' show';
this.y.className += ' active';
document.getElementById('minus' + id).classList.remove('fa-plus');
document.getElementById('minus' + id).classList.add('fa-minus');
} else {
/* this.x.className = this.x.className.replace('hide', ''); */
this.x.className = ' hide';
/* this.y.className = this.y.className.replace('', ''); */
this.y.className = 'accordionTitle';
document.getElementById('minus' + id).classList.remove('fa-minus');
document.getElementById('minus' + id).classList.add('fa-plus');
}
}


resultArray = {
'status': 'SUCCESS',
'responseCode': '000',
'errorMessage': null,
'cboRequestList': [
{
'seqNo': 1,
'applicableFor': '0',
'applicableForText': 'Hide',
'displayDesc': null,
'displaySeqNo': 1,
'description': 'ABCDisplayDesc1',
'type': 'W',
'content': null,
'field1': null,
'field2': null,
'field3': null,
'field4': null,
'markerId': null,
'markerLastModifiedTime': null,
'countryCode': null,
'languageCode': null,
'commentMaker': null
},
{
'seqNo': 2,
'applicableFor': '0',
'applicableForText': 'Hide',
'displayDesc': null,
'displaySeqNo': 1,
'description': 'ABCDisplayDesc1',
'type': 'W',
'content': null,
'field1': null,
'field2': null,
'field3': null,
'field4': null,
'markerId': null,
'markerLastModifiedTime': null,
'countryCode': null,
'languageCode': null,
'commentMaker': null
}
],
}


2 Answers
2

<div class="row justify-content-md-center bussinessOffice">
<div class="col-md-9 bussiness">
<h3 class="mainTitile">Help</h3>
<p class="bottom-30">
How may i help you today ?
</p>
<div *ngFor="let resultArrayText of cboRequestListArray; let i = index">
<ul class="list-group bottom-30" (click)="toggle[i] = !toggle[i]">
<li class="list-group-item" ng-class="{'activateToggle': toggle[i], '': !toggle[i]}" >
{{resultArrayText.description}}
<i class="fa" [ngClass]="toggle[i] ? 'fa-plus': 'fa-minus'" aria-hidden="true"></i>
</li>
<div *ngIf="!toggle[i]" class="container activateToggle">
<p class="content-30">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
</p>
<p>
<strong>Refer for more informations:</strong> <a>Click View Documents</a>
</p>
</div>
</ul>
</div>


</div>
</div>


You are using [ngClass] wrong.

You should first declare the class name and then evaluate true or false with your variable.

example:

<i class="fa " [ngClass]="{'fa-plus': someBoolean1, 'fa-minus': someBoolean2 }" aria-hidden="true"></i>


This expression means that fa-plus will be applied when someBoolean1 will be true and fa-minus will be applied when someBoolean2 will be true

You can apply as much classes as you want with ngClass.

In your case you should handle the true or false evaluation according to toggle[i] like this:

<i class="fa " [ngClass]="{'fa-plus': toggle[i], 'fa-minus': !toggle[i]}" aria-hidden="true"></i>


Regarding how to apply styles:
By using [ngStyle]="{'color': exp }" for each element you need. Notice 'exp' means expression which should be a variable or a function to evaluate to a color name or code.

Example:

exp = 'green';
<h1 [ngStyle]="{'color': exp }">My Text</h1>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.