Change color on click with switch

John Theoden

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

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>

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados