How to change an element’s CSS class and remove all other classes on click

Question

How do I handle a case in AngularJS 2 where on click of an element it needs to change its own style, and if other elements have that style they need to have it removed — preferably in one function.

Similar to Angular.js How to change an elements css class on click and to remove all others, only in AngularJS 2, using TypeScript.

Component

https://plnkr.co/edit/Q2BoU4sNnXdaJB5vrZ8h?p=preview

//our root app component
import { NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
        > I'm a div that gets styled on click
      </div>
      <div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
        > I also want to be styled but only when Im clicked
      </div>
      <div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
        > When one of us gets clicked the we want to be the only one with the style all others go back to normal
      </div>
       <div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
        > I'm just here cause my creator likes even numbers
      </div>
    </div>
  `,
  styles: [
  `
  .my-class {
    background-color: yellow;
  }
  `
  ]
})
class App {
  isClassVisible: false;

  constructor() {
  }

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Solution 1

The easiest fix to your problem is to assign a unique ID to each included element together with employing another variable to hold selected ID. The logic to turn on my-class CSS class will now be based on the selected ID.

Your new HTML template:

<div (click)="toggleHighlight(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
  > I'm a div that gets styled on click
</div>

Your toggleHighlight function:

highlightedDiv: number;

toggleHighlight(newValue: number) {
  if (this.highlightedDiv === newValue) {
    this.highlightedDiv = 0;
  }
  else {
    this.highlightedDiv = newValue;
  }
}

Working Plnk: https://plnkr.co/edit/fNoXWhUhMaUoeMihbGYd?p=preview

Solution 2

One solution which worked for me in showing the active menu is using typescript variable name in class as in

class="{{ text1Class }}"

and assign the class name in typescript.

this.text1Class = "active";

or

this.text1Class = "inactive";

You need to have different style class like this

.inactive {
     background-color : gray;
     padding : 10px;
}
.active {
      background-color : green;
      padding : 10px;
}

Assign the class name inside the function

textOneClicked() : void {
    this.text1Class = "active"; // set the active class
    this.text2Class = this.text3Class = this.text4Class = "inactive"; // reset other classes
}

A working Plunker here

Solution 3

I have one hard solution to this problem:

<div (click)="onclick($event);" >
    > I'm a div that gets styled on click
  </div>

app:

class App {
constructor() {
}
onclick(event){
    var l = event.target.parentElement.getElementsByClassName("my-class");
    var count = l.length;
    for(var i=0;i<count;i++){
    l[i].className = "";
}
event.target.className = "my-class";
}
}

Plink: https://plnkr.co/edit/RHqL56GrTiV9olYE1Ars?p=preview

Solution 4

Html code

<div [ngClass]="'first-div'">
    <h2 [ngClass]="'heading'">Log In</h2>
    <div [ngClass]="content">    
      <input type="text" placeholder="Enter User Name" name="username" id="username"#username class="in-cl">
        <i class="fa fa-user fa-edited" aria-hidden="true"></i>
      <input type="{{isPassword ? 'password':'text'}}" placeholder="Password" name="password" id="mypassword" #password class="in-cl">
        <i class="fa fa-lock fa-lock-edited" aria-hidden="true" id="lock-id" (click)="onclick()"></i>
      <button type="button" class="in-cl" (click)="credential(username.value,password.value)" >SIGN IN</button>

    </div>
    <div class="forgot">
      <a href="#">Forgot Password?</a>
    </div>  

</div>

css code

.first-div{
    width: 350px;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-top: 130px;
    border-radius: 5px;
    height: 400px;
    background-color: black;
    color: white;

}
.heading{
    color: white;
    text-align: center;
    font-weight: 500;
    /* background-color: white; */   
}
.in-cl{
    margin: 20px 20px 0px 20px;
    border: 2px solid white;
    border-radius: 15px;
    height: 40px;
    padding: 5px;
    width: 300px;
    outline: none;
    color: black;
    /* padding-right: 60px; */
}
::placeholder{
    color: black;
}
div button{
    background-color: #3aafa9;
    color:black;
    text-align: center;
    border: none;
}
.forgot{
    margin: 15px;
    text-align: center;
    font-weight: 550;
    color: white;
}

/* .image{
    position: absolute;
    left: 825px;
    top: 222px;
}
.lock-image{
    position: absolute;
    left: 825px;
    top: 282px;
} */
/* edited */
.fa-user:before{
    color: black;
}
.fa-lock:before{
    color: black;
} 
.fa-unlock:before{
    color: black;
}
.fa-edited{
    top: 228px;
    left: 770px;
    position: absolute;
    width: 28px;
}
.fa-lock-edited{
    top: 287px;
    left: 772px;
    position: absolute;
}
a{
    color: white;
}

ts code

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import swal from 'sweetalert2';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent{
  username:string="pavithra";
  password:string="8792415337abcd";
  p = document.getElementById('mypassword');

  constructor(private router:Router) {}
  credential(username:string,password:string){

    if(this.username==username && this.password==password ){
      this.router.navigate(['/home'])
      swal.fire({title:'Signed in successfully', confirmButtonColor:'#3aafa9', type:'success'})
    }
    else{
      this.router.navigate(['/login'])
      swal.fire({title:'Invalid Username or Password',type:'warning',position:'top-end'})

    }
  }
  isPassword = true;
  onclick(){
    let body = document.getElementById('lock-id')
    if (body.classList) { 
      body.classList.toggle("fa-unlock");
      this.isPassword = !(this.isPassword);
    } else {
      var classes = body.className.split(" ");
      console.log(classes)
      var i = classes.indexOf("fa-lock");

      if (i >= 0) 
        classes.splice(i, 1);
      else 
        classes.push("fa-unlock");
        body.className = classes.join(" "); 
    }


  }




}

View more solutions

Comments

[dtechplus]

Not bad a solution. I like it better somewhat cause it does not toggle the class.

[Timur]

And using similar logic, how can i make multiple selection?

[Harry Ninh]

@Timur multiple selection works in a very different way to single selection. You can't have a generic rule to tell when to switch off the previous selected elements (such as should I do it after x or y selections), or which one to switch off when it meets the first condition (should i turn off the first one I selected, or the one with lowest value, etc.)

[Greg]

Actually, not a good solution. Part of the point of Angular is to avoid the need to directly manipulate the DOM.

[Jeroen Heier]

Welcome to StackOverflow. Try to explain more clearly why this is an answer to the question.