Change color on click with switch

Question

I have some labels (ID, Start after ID, Vehicle name...etc) that I would like to change color when selected (something like "active" tab).

Thing is that beside every label I have "sort" icon and that icon changes it color when sort is in order (white) or reverse (red).

What I want is to change color of label text so that user can be aware on what element is sort active at that moment wether that sort is in order or reverse.

How can I do that? Is there any way to do it with ngClass,ngStyle? I'm using Angular 2

Html code for labels, sort images and etc.

<div class="vessel-label-div">
        <div class="field-width8">
            <label class="label-style">ID</label>
            <div (click)="showSelected1()">
                <span *ngIf="!selected1"><div class="sort-image-div" (click)="sortByIdUp()"><img src="/images/sort1.png" style="width: 98%;"></div></span>
                <span *ngIf="selected1"><div class="sort-image-div" (click)="sortByIdDown()"><img src="/images/sort2b.png" style="width: 98%;"></div></span>
            </div>
        </div>
        <div class="field-width9">
            <label class="label-style">Start after ID</label>
            <div (click)="showSelected2()">
                <span *ngIf="!selected2"><div class="sort-image-div" (click)="sortByAfterIdUp()"><img src="/images/sort1.png" style="width: 98%;"></div></span>
                <span *ngIf="selected2"><div class="sort-image-div" (click)="sortByAfterIdDown()"><img src="/images/sort2b.png" style="width: 98%;"></div></span>
            </div>
        </div>
        <div class="field-width16">
            <label class="label-style">Vessel name</label>
            <div (click)="showSelected3()">
                <span *ngIf="!selected3"><div class="sort-image-div" (click)="sortByNameUp()"><img src="/images/sort1.png" style="width: 98%;"></div></span>
                <span *ngIf="selected3"><div class="sort-image-div" (click)="sortByNameDown()"><img src="/images/sort2b.png" style="width: 98%;"></div></span>
            </div>
        </div>

FAISAL · Accepted Answer · 2017-09-14 21:28:43Z

3

Define two classes in your css, e.g.

.white {
     color: white;
}
.red {
    color: red;
}

In your ts:

selectedLabel: string = ' ';

And update that on click:

<div class="field-width8"> 
    <label class="vessel-label-style" [ngClass]={'red': selectedLabel === 'ID' }">ID</label>
    <div (click)="showSelected1()"> 
    <span *ngIf="!selected1"><div class="sort-image-div" (click)="sortByIdUp(); selectedLabel='ID';"><img src="/images/sort1.png" style="width: 98%;"></div></span> 
    <span *ngIf="selected1"><div class="sort-image-div" (click)="sortByIdDown(); selectedLabel=' ';"><img src="/images/sort2b.png" style="width: 98%;"></div></span> 
    </div> 
</div>

edited Sep 14, 2017 at 21:28

answered Sep 14, 2017 at 21:18

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Theoden Over a year ago

It works for switching color on label, but when I want to click on some other label to sort by that criteria, color still stays on previous label that I made sort... Is there way to change color on just selected label (say red) at that time, and all other labels to be default (white)? Thanks

FAISAL Over a year ago

Define a variable in your class, and use that to switch color. I'll update my answer

John Theoden Over a year ago

It still afects my img change (selected1) ...I can now switch red color when i click on labels, but I can also remove red color when i click on sort icon again ... Can it stay red label as long as I use sort on that label (wether I click on sort icon numerous times), it will only change label color if I select other label :)

John Theoden Over a year ago

Found a solution ...when i set both fields to be selectedLabel='ID';" instead empty string on other, it will stay red, wether i click on it multiple times. Thanks for solution

Collectives™ on Stack Overflow

Change color on click with switch

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related