CODEWITHSUNDEEP
cssangularng-classng-style
Maniselvam R
Maniselvam R

Reputation: 43

ngClass and ngStyle directive onclick element color needs to change in angular?

Hi every one I have created stackblitz https://stackblitz.com/edit/angular-fnvhnn-giypgb?file=app%2Fexpansion-overview-example.html for reference, I have used expansion panel to exapand the content, based on click the element the expansion happening in the stackblitz, for example if we click All element on top the all content will gets exapand, if we click B element the B content will gets expand.

What I exactly looking is I want to use ngstyle or ngclass in top loop of {{tab}}, if we click All tag it should be change into green color and again if click same All tag it's should change into red color, if we click B tag it should be change into green color again if click same B tag it's should change into red color like toggle.

if panelstate = false the tag should be in red color and if it is true it's need to change green color

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);
      }
    }

Upvotes: 1

Views: 3048

Answers (3)

yazan
yazan

Reputation: 537

Working StackBlitz

A simple approach to add an array with the tabs name

  tab = ["ALL", "A", "B", "C"];
  panelOpenState = "";

and make panelOpenState to store the open tab name.

Secondly update the template file as follows:

<div style="display: flex;justify-content: space-evenly;">
    <div *ngFor="let tab of getTablist();">
        <p (click)='clickOntab(tab)'
            [ngStyle]="{'color':panelOpenState === tab ? 'green' : 'red' }">{{tab}}</p>
    </div>

ngStyle will trigger when the tab name is equal to the panelOpenState and this will do the trick.

Upvotes: 0

unsignedmind
unsignedmind

Reputation: 182

I think the best readable soultion would be this:

<div style="display: flex;justify-content: space-evenly;">
    <div *ngFor="let tab of getTablist();">
        <p (click)='clickOntab(tab)' [class.redClass]="!panelOpenState" [class.greenClass]="panelOpenState">
            {{tab}}
        </p>
    </div>
</div>

Upvotes: 0

Himanshu Singh
Himanshu Singh

Reputation: 2165

You can achieve this by using ngClass like shown below,

[ngClass]="(panelOpenState===true)?'greenClass':'redClass'"

As of now ngClass of all tabs are binded to single property panelOpenState, so all are changing colors altogether but you should store the open or closed state of each tab separately in some array. Such that only the tab i.e opened is green in color and vice-versa.

Refer this working example demo

Upvotes: 2

Related Questions