Check and add class for tabs Angular2

Question

I have MDL styled tabs in my Angular2 app. And what I need is to check whether a tab has class and if it doesn't then to add that class on click.

My component.html:

<div class="releases-list-component">

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">

    <div class="mdl-tabs__tab-bar">
        <a routerLink="albums" class="mdl-tabs__tab" (click)="addClass()">Albums</a>
        <a routerLink="splits" class="mdl-tabs__tab" (click)="addClass()">Splits</a>
        <a routerLink="tributes" class="mdl-tabs__tab" (click)="addClass()">Tributes</a>
    </div>

</div>

<router-outlet></router-outlet>

My component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'releases-details',
    templateUrl: 'app/releases/releases-details.component.html'
})

export class ReleasesDetailsComponent { 

    className: string = "";

    addClass(){
        //??? this.hasClass("is-active")?this.removeClass("is-active"):this.addClass("is-active");
    }

}

Look at the comment above inside the addClass function.

Do you want to highlight current active tab? – micronyks Dec 03 '16 at 10:36 — micronyks, Dec 03 '16 at 10:36

score 0 · Answer 1 · answered Dec 03 '16 at 10:27

Depending on where you'd want to add the class of is-active you can change it :

<div class="releases-list-component" [class.is-active]='isActive'>


export class ReleasesDetailsComponent { 

    className: string = "";
    isActive = false;
    addClass(){

        if(isActive){

           isActive = false
        }else{

        isActive = true

        }
    }

}

score 0 · Accepted Answer · answered Dec 03 '16 at 10:41

0

You should take an advantage of routerLinkActive directive if you are using Angular2 router. Router itself adds and removes is-active class based on current active route. And if you use it, you don't require to use click event anymore.

<div class="mdl-tabs__tab-bar">
        <a routerLink="albums"  routerLinkActive="is-active" class="mdl-tabs__tab">Albums</a>
        <a routerLink="splits" routerLinkActive="is-active" class="mdl-tabs__tab" >Splits</a>
        <a routerLink="tributes" routerLinkActive="is-active" class="mdl-tabs__tab" >Tributes</a>
    </div>

answered Dec 03 '16 at 10:41

micronyks

54,797
15
112
146

It seems like that's what I need. But another problem is that the "is-active" class applied in the code on click (I inspected the tabs in the Chrome Console), but there is no "visualization" of the style which supposed to be applied when a tab has the class "is-active". Do you know what's the problem with it? – Alexandr Belov Dec 03 '16 at 10:55
I don't get your question properly. Just look for the correct element and hopefully visualization of style would be there. – micronyks Dec 03 '16 at 10:57
I meant the style "is-active" is applied in the code, but visually a tab with that style is not decorated as that style implies (the style is 100% working - checked on other elements in the same app). – Alexandr Belov Dec 03 '16 at 11:11
Sorry hard for me to understand your problem ! – micronyks Dec 03 '16 at 11:17

Check and add class for tabs Angular2

2 Answers2