How to switch tabs and change css class on click using Angular2?

Question

On clicking on one tab i want to make the class tab-active and remove it from the other and vice versa. The HTML code on which I want to implement this is :-

<div class="tab-change-login">
    <ul class="un-styled tab-ul">
        <li class="tab-active" data-login="signin-area">SIGN IN</li>
        <li data-login="signup-area">SIGN UP</li>
    </ul>
</div>

How do I write a onClick function to switch between 2 tabs usiing angular2

Günter Zöchbauer · Accepted Answer · 2016-05-02 10:53:50Z

3

You can use class binding like:

@Component({
  selector: '...',
  template: `
    <div class="tab-change-login">
        <ul class="un-styled tab-ul">
            <li [class.tab-active]="activeTabName == 'signin-area'" 
                data-login="signin-area"
                (click)="activeTabName = 'signin-area'">SIGN IN</li>
            <li [class.tab-active]="activeTabName == 'signup-area'" 
                data-login="signup-area"
                (click)="activeTabName = 'signup-area'">SIGN UP</li>
        </ul>
    </div>
`})
export class MyComponennt {
  activeTabName = 'signup-area';
}

There are other ways like ngClass

answered May 2, 2016 at 10:53

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

Reckonsys Over a year ago

Hi, thanks that worked but now if I have to hide a particular portion depending on which tab is selected will using ngIf to check the activeTabName value and hide/unhide accordingly work?

Günter Zöchbauer Over a year ago

Sure ngIf or ngSwitch angular.io/docs/ts/latest/api/common/NgSwitch-directive.html

Collectives™ on Stack Overflow

How to switch tabs and change css class on click using Angular2?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related