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-14T21:28:43.053

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 '17 at 21:28

answered Sep 14 '17 at 21:18

FAISAL

33,618
10
97
105

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 – John Theoden Sep 14 '17 at 21:24
1

Define a variable in your class, and use that to switch color. I'll update my answer – FAISAL Sep 14 '17 at 21:27
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 Sep 14 '17 at 21:47
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 – John Theoden Sep 14 '17 at 22:01

Change color on click with switch

1 Answers1