Angular - Active and desactive CSS with multiple selection

user_14021160 0
Viewed 44

I need advice.

I need to be able to select two elements.

The second element can be selected by pressing "shift". How do I take to change the background-colour when I click on an element and remodify when I click on another element?

With an image it might be more meaningful:

angular css
1 Answers

You can use a condition like this in your html

[style.background-color]="a.xx? 'purple': 'turquoise'"

or in your component like:

 @Component({   
   selector: 'hello',   
   template: `
     <a-item *ngFor="let a of catalogue" 
       [a]="a"
       [style.background-color]="a.xx ? 'green': 'red'">
     </a-item>   ` })

You can define a class and change the class when somebody click on other box. It is to say, class ".previous_selected" and "now_selected" and onclick on a new element change the class the new element will have now_selected and the previous element the other class

Other option:

Example:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  colorA = 'red'
  colorB = 'blue'
}

In the HTML

<div [style.color]="isSelected ? colorA : colorB">Some example text</div>

isSelected can be a function that say true o false.

You can find more information here

user_112473370
Related