Angular [Class.Active]="Isactive" - What Does "Class.Active" Mean Here

In Angular, how do you determine the active route?

With the new Angular router, you can add a [routerLinkActive]="['your-class-name']" attribute to all your links:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Or the simplified non-array format if only one class is needed:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Or an even simpler format if only one class is needed:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

See the poorly documented routerLinkActive directive for more info. (I mostly figured this out via trial-and-error.)

UPDATE: Better documentation for the routerLinkActive directive can now be found here. (Thanks to @Victor Hugo Arango A. in the comments below.)

How to do add active class on click in angular?

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.

Angular: conditional class with *ngClass

Angular version 2+ provides several ways to add classes conditionally:

type one

    [class.my_class] = "step === 'step1'"

type two

    [ngClass]="{'my_class': step === 'step1'}"

and multiple option:

    [ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"

type three

    [ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"

type four

    [ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

You can find these examples on the documentation page

What does class=active really do in bootstrap 3?

With 4 pages in your Navigation, the .active class should be on each different list item from #1 to #4 depending on the page you're in. Below are 4 excerpts for each 4 pages.

Breadcrumbs.html:

                 <ul class="nav nav-pills nav-justified">
                    <li class="active"><a href="Breadcrumbs.html">Dashboard</a></li>
                    <li><a href="Jumbotron.html">Profile</a></li>
                    <li><a href="FavoutieActors.html">Earnings</a></li>
                    <li><a href="Buttons.html">Settings</a></li>                        
                </ul>

Jumbotron.html:

                 <ul class="nav nav-pills nav-justified">
                    <li><a href="Breadcrumbs.html">Dashboard</a></li>
                    <li class="active"><a href="Jumbotron.html">Profile</a></li>
                    <li><a href="FavoutieActors.html">Earnings</a></li>
                    <li><a href="Buttons.html">Settings</a></li>                        
                </ul>

FavoutieActors.html:

                 <ul class="nav nav-pills nav-justified">
                    <li><a href="Breadcrumbs.html">Dashboard</a></li>
                    <li><a href="Jumbotron.html">Profile</a></li>
                    <li class="active"><a href="FavoutieActors.html">Earnings</a></li>
                    <li><a href="Buttons.html">Settings</a></li>                        
                </ul>

Breadcrumbs.html:

                 <ul class="nav nav-pills nav-justified">
                    <li><a href="Breadcrumbs.html">Dashboard</a></li>
                    <li><a href="Jumbotron.html">Profile</a></li>
                    <li><a href="FavoutieActors.html">Earnings</a></li>
                    <li class="active"><a href="Buttons.html">Settings</a></li>                        
                </ul>

Angular 2 - Select clicked list item (Add 'active' class and remove from siblings)

You can use ngClass for what you are looking for:

 <ul id="grouplist" class="list-group">
     <li class="list-group-item" [ngClass]="{'active': selectedItem == item}" (click)="listClick($event, item)" *ngFor="let item of groups">
        {{ item.name }}
     </li>
</ul>

And in your listClick just set the selected item to that item:

listClick(event, newValue) {
    console.log(newValue);
    this.selectedItem = newValue;  // don't forget to update the model here
    // ... do other stuff here ...
}

Why Angular2 routerLinkActive sets active class to multiple links?

Try to set [routerLinkActiveOptions]="{exact: true}" to HTML as below :

<ul class="nav nav-tabs">
  <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

How does it work ?##

RouterLinkActive does chunk the current route and try to match it's parts with the RouterLinks you've provided. With that in mind, route / will be matched anywhere as it's the very parent for all the other routes (like /about, /contact, etc. as it consist of / + route-path). To simplify, it's not a bug, it's sometimes a needed functionality in your application to match multiple routes. To prevent that, you can specify the routerLinkActiveOptions to match exactly the route you're on. That means it's not going to match parent routes but will only try to find the routerLink provided for this exact route.

*ngFor with class.active

You can do that as follow

<div class="rating-type__bar-wrapper rating-type__bar-left">
    <div class="rating-type__pipe" *ngFor="let opt of arr; index as i" #messageEl [attr.data-option-id]="opt._id" id="rating_id_{{index}}" (click)="onRatingSelected(index)">
        <div class="rating-type__pipe-pillar" (click)="logMessageId(messageEl)">
            <span [ngStyle]="{'height': (100 - (i * 20))+'%', 'opacity': (1 - (i * 0.2))}" class="rating-type__pipe-pillar-bg"></span>
        </div>
        <div class="rating-type__pipe-text">{{opt.text}}</div>
     </div>
 </div>

In .ts

onRatingSelected(clickedIndex: number){
    this.arr.forEach((ratingBar, index){
        const bar = document.getElementById('rating_id_' + index);
        if(index >= clickedIndex) bar.classList.add('rating-type__pipe--active');
        else bar.classList.remove('rating-type__pipe--active');
    });
}

I don't think, it will help you much, though can try.

how do i add ngClass in angular need to show status active red and other should be inactive black

<div *ngFor="let item of status_history; let i = index">
  <div [ngClass]="{'icons_inactive' : (i+1) === status_history.length, 'icons_active': (i+1) !== status_history.length}">
      <span class="material-icons">check_circle</span>
      <span class="status_font">{{item?.invoice_status?.data[0]?.status}}</span>
      <div class="history-font">{{item?.updated_at}}</div>
  </div>
</div>

Have you tried this?

---

Related Topics