Hey everyone! I've created a StackBlitz demo for reference, where I used an expansion panel to expand content based on click events. For example, clicking on the All element expands all content, while clicking on the B element expands only 'B' content.
What I'm trying to achieve is to use ngStyle or ngClass in the top loop of {{tab}}. When clicking on the All tag, it should change to green color, and clicking again should toggle it to red color. The same behavior should apply to the B tag as well.
If panel state = false, the tag should be red, and when it's true, it should turn green.
Panel open state:
panelOpenState = false;
Top ngFor loop:
<div style="display: flex;justify-content: space-evenly;">
<div *ngFor="let tab of getTablist();"> <p (click)='clickOntab(tab)' [ngStyle]="{'color':panelOpenState === 'true' ? 'green' : 'red' }">{{tab}}</p></div>
</div>
Ts File
panelOpenState = false;
public tabType: string = "";
clickOntab(tab) {
if (this.tabType != "" && this.tabType === tab) {
this.panelOpenState = false;
this.tabType = "";
} else {
this.panelOpenState = true;
this.tabType = tab;
}
}
getTablist() {
const tabList = this.cricketList.map(list => list.alphabet);
return ["All"].concat(tabList);
}
}