how to add css class on selected list item

Question

I have a list group and I want to add a css class when one item is selected using ngClass directive

how to verify is the item is selected?

I only have one option.. this is a sidebar component, and when I pick an option, it has to send it to the parent (I did that with @Output) and also have a css class on selected option...

this is my component.html

<ul class="list-group">
    <li *ngFor="let option of options" (click)="selectOption(option)" class="list-group-item" [ngClass]="option ? 'activate-class' : 'deactivate-class'">
        {{option.title}}
    </li>
</ul>

component.ts

  @Output() optionSelected: EventEmitter<any> = new EventEmitter();
  options = [
    {
        title: "Activate account",
        value: NavigationOptions.ACTIVATE_VENDOR
    },
    {
        title: "Deactivate account",
        value: NavigationOptions.DEACTIVATE_VENDOR
    }
];

  constructor() { }

  ngOnInit() {
  }

  selectOption(option) {
    this.optionSelected.emit(option);
  }

It depends on what selectOption() does, i.e. how you store the selected option(s) in your component. Add a method isOptionSelected(option)in your component, and use it in your template. — JB Nizet
– JB Nizet, Commented Dec 10, 2019 at 10:15

Akora · Accepted Answer · 2019-12-10 10:23:18Z

3

You could store the selected option in a variable and check for that:

public selectedOption;

selectOption(option) {
  this.optionSelected.emit(option);
  this.selectedOption = option;
}

and then check in the ngClass for this variable:

[ngClass]="option === selectedOption ? 'activate-class' : 'deactivate-class'"

or if you only want to set activate-class and don't need deactivate-class:

[class.activate-class]="option === selectedOption"

answered Dec 10, 2019 at 10:23

Akora

8558 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cmprogram · Accepted Answer · 2019-12-10 10:31:10Z

2

There is no need to over-complicate things or bloat your ts file with code.

You can simply have a selectOption in the ts file.

TS :

selectOption; // If your option is an object, which it is - then consider adding an interface for it here

There is also no need to have 'deactivate-class', if the class doesn't exist on it, we can assume it doesn't apply.

HTML :

<ul class="list-group">
  <li *ngFor="let option of options" (click)="selectOption = option" class="list-group-item" [ngClass]="{'activate-class' : selectOption === option}">
    {{option.title}}
  </li>
</ul>

answered Dec 10, 2019 at 10:31

cmprogram

1,8943 gold badges15 silver badges27 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-12-10 11:19:10Z

0

you can store the selected option in a variable and show the class name dynamically based on that

Try like this:

HTML:

<ul class="list-group">
    <li *ngFor="let option of options" (click)="selectOption(option);selectedOption = option.title" class="list-group-item" [ngClass]="selectedOption == option.title ? 'activate-class' : 'deactivate-class'">
        {{option.title}}
    </li>
</ul>

Working Demo

edited Dec 10, 2019 at 11:19

answered Dec 10, 2019 at 10:27

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

5 Comments

Prashant Pimpale Over a year ago

that can be useful when selecting multiple items

user2004 Over a year ago

i have updated my question with all my code from my .ts file; I only have one option.. this is a sidebar component, and when I pick an option, it has to send it to the parent (I did that with @Output) and also have a css class on selected option...

Adrita Sharma Over a year ago

Try the modified answer

user2004 Over a year ago

one last question... how can i make one option to be selected by default?

Adrita Sharma Over a year ago

In the .ts file, set selectedOption = "Activate account"

Collectives™ on Stack Overflow

how to add css class on selected list item

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related