How to do add active class on click in angular?

Question

I want to change active class in li click

<pre> <li class="en active" (click)="useLanguage('fr')"></li>
                    <li class="sp" (click)="useLanguage('zh')"></li>
                    <li class="po" (click)="useLanguage('en')"></li>

In component I have written the function

useLanguage(language: string) {
    this.translate.use(language);
}

I want to add the active class when click on li also have to removed from other li. How to do?

BizzyBob · Accepted Answer · 2021-10-30 10:21:48Z

4

A class can be conditionally applied using this syntax:

<div [class.className]="someBoolean"><div>

So, if you store the selected language in a variable, you can do like this:

Template:

  <li [class.active]="selectedLanguage==='fr'" (click)="useLanguage('fr')"></li>
  <li [class.active]="selectedLanguage==='zh'" (click)="useLanguage('zh')"></li>
  <li [class.active]="selectedLanguage==='en'" (click)="useLanguage('en')"></li>

Component:

selectedLanguage = 'fr';

useLanguage(language: string) {
    this.translate.use(language);
    this.selectedLanguage = language;
}

Here's a working StackBlitz demo.

answered Oct 30, 2021 at 10:21

BizzyBob

14.9k4 gold badges32 silver badges62 bronze badges

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

Comments

mohamed ali · Accepted Answer · 2021-10-30 10:29:52Z

1

// default lang

selectedLanguage = "fr";

// html

<li [ngClass]="{'selected-value' : selectedLanguage==='fr'}"(click)="useLanguage('fr')"></li>

// change language function

useLanguage(language: string) {
    this.translate.use(language);
    this.selectedLanguage = language;
}

answered Oct 30, 2021 at 10:29

mohamed ali

1922 silver badges3 bronze badges

Collectives™ on Stack Overflow

How to do add active class on click in angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related