Stylowanie po kliknięciu

Question

Cześć.

Mam taką zagwozdkę jak mogę dokonać aby po kliknięciu css na stałe zmienił bacground  

mój html:

<span *ngIf="day.important" class="task">{{day.allNumber}}</span>

css:

.task{
  padding: 4px;
  background: @task;
  color: white !important
}
.task:active {
 background: @hover;
}
.task:focus {
 background: @hover;
}

Użyłem dwóch selektorów active i focus. Kolor tła się zmienia tylko po naciśnięciu ,ale zaraz znika. Ale czy da się jakoś opisać aby trwale pozostał dany kolor (mowa o użyciu samego css)?

Z góry dziękuje.

Answer 1

Używasz angulara, czyli inicjalnie w komponencie możesz dodać jakąś flagę (np. isClicked), która inicjalnie jest na false, po pierwszym kliknięciu, ustawisz tą flagę na true i w spanie dajesz 

<span
  ...
  [ngClass]={'twoja-klasa': isClicked}
  ...
>

ogólnie działa to tak, że klasa jest dodana w elemencie w momencie kiedy isClicked jest true.

Comments

Dziękuje za cenna wskazówkę.

---

Tylko problem jest u mnie ,że to jest tablica i w sumie jak jedna wartość przyjmie true to wszystkie inne też się od razu pojawią. Nie da się jednak w css ?

---

No to prościej, dla każdego elementu po wciśnięciu, wywołaj funkcję która doda do tego elementu klasę. Przy naciśnięciu możesz przekazać do funkcji event, który posiada pole target. Dzięki niemu możesz bez problemu dodać jaką klasę chcesz temu elementowi. Tutaj masz przykładzik: https://stackblitz.com/edit/angular-zjrq77. Jak byś miał jakieś pytanka co do Angulara to wal śmiało ;P

---

Nie rozumiem bo mam tutaj html: (zmieniłem koncept tak jak pisałeś na click)

<li *ngFor="let day of allDays;" (click)="getNexDay(day.allNumber)" #htmlliElement [ngClass]="{'task__active': is_clicked}">

a Tutaj mam wywołanie tego click :

getNexDay(day : number): void {
      this.nextTaskRef.getNextTask(day);
      this.is_clicked = true;
  }

I co w tej funkcji mam przypisać aby jak to teraz aby html dokładnie li odpowiedni dostał tą klasę ? Z góry dziękuje za pomoc. 

---

To:

...
(click)="getNexDay(day.allNumber)"
...

zamieniamy na:

...
(click)="getNexDay($event, day.allNumber)"
...

funkcję getNextDay zmieniamy tak:

getNexDay(event: Event, day : number): void {
  this.nextTaskRef.getNextTask(day);
  this.is_clicked = true;
  event.target.classList.add('task__active');
;}

I powinno śmigać (wtedy już usuwasz [ngClass]=...).

PS. w ogóle sorki ale rozwiązanie nie wgrało się na stackblitza :P

---

A mam takie techniczne pytanie o classList

Bo angular mi wywala błąd :

TS2339: Property 'classList' does not exist on type 'EventTarget

I jak to teraz znaleźć ?

---

Dobra już ogarnąłem w dokumentacji 

getNexDay(event: any, day : number): void {

Event zamieniłem na any. 

Bardzo ślicznie dziękuje za pomoc.

---

A mam jeszcze jedno pytanie.

mając taką strukturę html:

 <li *ngFor="let day of allDays;" (click)="getNexDay($event,day.allNumber)">

        <span class="active" *ngIf="day.allNumber == actualDay">{{day.allNumber}}</span>

        <ng-template [ngIf]="day.allNumber != actualDay">

          <span *ngIf="!day.normal && !day.important" >{{day.allNumber}}</span>
        </ng-template>

    </li>

to czasami :

event.target.classList.add('task__active');

Dodaje mi klasę do li a czasami do span czy do się to jakoś ujarzmić ?