CODEWITHSUNDEEP
cssangular
Jaromme Lawn
Jaromme Lawn

Reputation: 53

How do I apply a class to an element that has been clicked, and remove it from the previous element?

I'm using angular to hide and show different divs, based on the ngif feature, currently I have this.

.html 

<div class="boxes">
<div class="box" (click)="tabToggle(1)">box1</div>
<div class="box" (click)="tabToggle(2)">box2</div>
<div class="box" (click)="tabToggle(3)">box3</div>
<div class="box" (click)="tabToggle(4)">box4</div>
<div class="box" (click)="tabToggle(5)">box5</div>
</div>

<div *ngIf="showTab == 1" class="box1-content">Lorem ipsum 1</div>
<div *ngIf="showTab == 2" class="box2-content">Lorem ipsum 2</div>
<div *ngIf="showTab == 3" class="box3-content">Lorem ipsum 3</div>
<div *ngIf="showTab == 4" class="box4-content">Lorem ipsum 4</div>
<div *ngIf="showTab == 5" class="box5-content">Lorem ipsum 5</div>

Here is a live link: https://stackblitz.com/edit/angular-8reazh?embed=1&file=src/app/app.component.ts

I was wondering how I could apply a class to the selected "box" element. For example, the box that is currently selected has a blue background, and when I click on another box, that box turns blue, and the previous box turns back to red

Upvotes: 1

Views: 84

Answers (2)

amira ahmed
amira ahmed

Reputation: 86

in html 

<div class="boxes">
<div class="box" (click)="tabToggle(1)" [class.selected]="selectedbox == 1">box1</div>
<div class="box" (click)="tabToggle(2)" [class.selected]="selectedbox == 2">box2</div>
<div class="box" (click)="tabToggle(3)" [class.selected]="selectedbox == 3">box3</div>
<div class="box" (click)="tabToggle(4)" [class.selected]="selectedbox == 4">box4</div>
<div class="box" (click)="tabToggle(5)" [class.selected]="selectedbox == 5">box5</div>
</div>

<div *ngIf="showTab == 1" class="box1-content">Lorem ipsum 1</div>
<div *ngIf="showTab == 2" class="box2-content">Lorem ipsum 2</div>
<div *ngIf="showTab == 3" class="box3-content">Lorem ipsum 3</div>
<div *ngIf="showTab == 4" class="box4-content">Lorem ipsum 4</div>
<div *ngIf="showTab == 5" class="box5-content">Lorem ipsum 5</div>

in typescript file write 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  showTab = 1;
  selectedbox: number = 1;
  tabToggle(index){
    this.selectedbox = index;
    this.showTab =index;
  }
}

in css file add this class

.selected {
  background-color: black;
  color: white;
}

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Option 1

Add [ngClass]="{'current':showTab == 1} in html.

Working code:

<div class="boxes">
<div class="box" (click)="tabToggle(1)" [ngClass]="{'current':showTab == 1}">box1</div>
<div class="box" (click)="tabToggle(2)" [ngClass]="{'current':showTab == 2}">box2</div>
<div class="box" (click)="tabToggle(3)" [ngClass]="{'current':showTab == 3}">box3</div>
<div class="box" (click)="tabToggle(4)" [ngClass]="{'current':showTab == 4}">box4</div>
<div class="box" (click)="tabToggle(5)" [ngClass]="{'current':showTab == 5}">box5</div>
</div>

in CSS:

.current{
   background: blue;
}

Option 2

Use [style.background]

See working code

<div class="boxes">
<div class="box" (click)="tabToggle(1)" [style.background]="showTab == 1?'blue':'red'">box1</div>
<div class="box" (click)="tabToggle(2)" [style.background]="showTab == 2?'blue':'red'">box2</div>
<div class="box" (click)="tabToggle(3)" [style.background]="showTab == 3?'blue':'red'">box3</div>
<div class="box" (click)="tabToggle(4)" [style.background]="showTab == 4?'blue':'red'">box4</div>
<div class="box" (click)="tabToggle(5)" [style.background]="showTab == 5?'blue':'red'">box5</div>
</div>

Upvotes: 2

Related Questions