CODEWITHSUNDEEP
javascripthtmlcsstypescriptangular
Reckonsys
Reckonsys

Reputation: 361

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

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

Upvotes: 1

Views: 1920

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657158

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

Upvotes: 3

Related Questions