CODEWITHSUNDEEP
cssangulartypescript
Sajeetharan
Sajeetharan

Reputation: 222592

Apply specific class on <li> element on click angular2

I have a component like below,

<li >
    <a (click)="status='today'" class="search-dropdown-tabs-active">Today</a>
</li>
<li>
    <a (click)="status='tomorrow'">Tomorrow</a>
</li>
<li>
    <a (click)="status='weekend'">This weekend</a>
</li>
<li>
    <a (click)="status='thisweek'" >This week</a>
</li>
<li>
    <a (click)="status='nextweek'" >Next week</a>
</li>
<li>
    <a (click)="status='thismonth'" >This month</a>
</li>

How can i apply class="search-dropdown-tabs-active" on selected li element ?

App.component.ts

import { Component, Output,EventEmitter} from '@angular/core'; 
@Component({
    moduleId:module.id,
    selector: 'calendar',
    templateUrl: './calendar.component.html'
})
export class CalendarComponent{
}

Upvotes: 0

Views: 1965

Answers (4)

Jeetendra Chauhan
Jeetendra Chauhan

Reputation: 1977

<ul>
    <li [class.search-dropdown-tabs-active]="status==='today'">
        <a (click)="status='today'" 
        >Today</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status==='tomorrow'">
        <a (click)="status='tomorrow'" >Tomorrow</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='weekend'">
        <a (click)="status='weekend'" >This weekend</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='thisweek'">
        <a (click)="status='thisweek'" >This week</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='nextweek'">
        <a (click)="status='nextweek'" >Next week</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='thismonth'">
        <a (click)="status='thismonth'">This month</a>
    </li>
  </ul>

Working Link

Upvotes: 2

Yoav Schniederman
Yoav Schniederman

Reputation: 5391

<li [ngClass]="{'search-dropdown-tabs-active': isActivate("today")'}">
    <a (click)="activeTab = 'today'">Today</a>
</li>



isActivate(value : string) : boolean{
   return activeTab === value;
}

Upvotes: 1

Dmitry Lobov
Dmitry Lobov

Reputation: 303

<li [ngClass]="{'search-dropdown-tabs-active': status === 'today'}">
    <a (click)="status='today'">Today</a>
</li>
<li [ngClass]="{'search-dropdown-tabs-active': status === 'tomorrow'}">
    <a (click)="status='tomorrow'">Tomorrow</a>
</li>

Upvotes: 1

Rando Hinn
Rando Hinn

Reputation: 1322

This is how the angular2 docs say it should be done. Read more on the docs page.

<li [class.search-dropdown-tabs-active]="status === 'thismonth'">
    <a (click)="status='thismonth'" >This month</a>
</li>

Upvotes: 3

Related Questions