Using Angular 2: Applying a specific class to a single element with [ngClass]

Question

Using Angular 2: Applying a specific class to a single element with [ngClass]

I have a header table with arrows indicating sorting order, using Bootstrap icons. However, when I click on a column, all columns receive the icon class. Here is an example of what I mean: https://i.sstatic.net/CAS81.png

Below is the code snippet:

HTML ->

<table class="table table-hover">
<thead>
    <th (click)="orderBy('username')">Username<span [ngClass]="displayArrow()"></span></th>
    <th (click)="orderBy('email')">Email<span [ngClass]="displayArrow()"></span></th>
    <th (click)="orderBy('id')">Id<span [ngClass]="displayArrow()"></span></th>
    <th (click)="orderBy('roleId')">Role Id<span [ngClass]="displayArrow()"></span></th>
</thead>
<tbody>
    <tr *ngFor="let user of usersListData | orderByController: OrderByParams">
        <td (click)="onSelectFilterParam(user.username)">{{user.username}}</td>
        <td (click)="onSelectFilterParam(user.email)">{{user.email}}</td>
        <td (click)="onSelectFilterParam(user.id)">{{user.id}}</td>
        <td (click)="onSelectFilterParam(user.roleId)">{{user.roleId}}</td>
    </tr>
</tbody>

AppComponent ->

private toggleArrow = 0;

orderBy(columnName: string) {
    this.toggleArrow++;
    if(this.toggleArrow > 2) {
        this.toggleArrow = 0;
    }
    console.log(this.toggleArrow);
}

displayArrow() {
    if(this.toggleArrow === 0) {
        return '';
    }
    else if(this.toggleArrow === 1) {
        return 'glyphicon glyphicon-chevron-up';
    }
    else if(this.toggleArrow === 2) {
        return 'glyphicon glyphicon-chevron-down';
    }
}

Is it possible to bind the class to just one element?

twitter-bootstrap angular typescript binding

Answer 1

Answer №1

This approach may not be the most sophisticated, but you can achieve something similar by specifying the columns in your component.

   columns: any[] = [
      {'Name':'username','Direction':0},
      {'Name':'email','Direction':0},
      {'Name':'id','Direction':0},
      {'Name':'roleId','Direction':0}
    ]

In your HTML template, you can implement it like this:

<table class="table table-hover">
<thead>
    <th *ngFor="let col of columns" (click)="orderBy(col.Direction)">{{ col.Name }}<span [ngClass]="displayArrow(col.Direction)"></span></th>
</thead>
<tbody>
    <tr *ngFor="let user of usersListData | orderByController: OrderByParams">
        <td (click)="onSelectFilterParam(user.username)">{{user.username}}</td>
        <td (click)="onSelectFilterParam(user.email)">{{user.email}}</td>
        <td (click)="onSelectFilterParam(user.id)">{{user.id}}</td>
        <td (click)="onSelectFilterParam(user.roleId)">{{user.roleId}}</td>
    </tr>
</tbody>

The function for ordering would look like this:

orderBy(dir: number) {
    dir++;
    if(dir > 2) {
        dir = 0;
    }
    console.log(dir);
}

And for displaying the arrow icon:

displayArrow(dir: number): string {
    if(dir === 0) {
        return '';
    }
    else if(dir === 1) {
        return 'glyphicon glyphicon-chevron-up';
    }
    else if(dir === 2) {
        return 'glyphicon glyphicon-chevron-down';
    }
}

Answer 2

This approach may not be the most sophisticated, but you can achieve something similar by specifying the columns in your component.

   columns: any[] = [
      {'Name':'username','Direction':0},
      {'Name':'email','Direction':0},
      {'Name':'id','Direction':0},
      {'Name':'roleId','Direction':0}
    ]

In your HTML template, you can implement it like this:

<table class="table table-hover">
<thead>
    <th *ngFor="let col of columns" (click)="orderBy(col.Direction)">{{ col.Name }}<span [ngClass]="displayArrow(col.Direction)"></span></th>
</thead>
<tbody>
    <tr *ngFor="let user of usersListData | orderByController: OrderByParams">
        <td (click)="onSelectFilterParam(user.username)">{{user.username}}</td>
        <td (click)="onSelectFilterParam(user.email)">{{user.email}}</td>
        <td (click)="onSelectFilterParam(user.id)">{{user.id}}</td>
        <td (click)="onSelectFilterParam(user.roleId)">{{user.roleId}}</td>
    </tr>
</tbody>

The function for ordering would look like this:

orderBy(dir: number) {
    dir++;
    if(dir > 2) {
        dir = 0;
    }
    console.log(dir);
}

And for displaying the arrow icon:

displayArrow(dir: number): string {
    if(dir === 0) {
        return '';
    }
    else if(dir === 1) {
        return 'glyphicon glyphicon-chevron-up';
    }
    else if(dir === 2) {
        return 'glyphicon glyphicon-chevron-down';
    }
}

Using Angular 2: Applying a specific class to a single element with [ngClass]

Answer №1

Similar questions

What's causing the "* before initialization" error in Vue with TypeScript?

Accessing images hosted on an IIS server from a client using a URL in an ASP .Net application

What is the best way to provide inputs to a personalized validation function?

Using Angular to automatically update the user interface by reflecting changes made in the child component back to the parent component

Using Bootstrap 3 with ResponsiveSlides.js

Issues with animations in Ionic 3 and Angular 4 not functioning as expected

Tips for locating the beginning and conclusion of a RxJS.ajax request?

Clearing the require cache in Node.js using TypeScript

Effect fails to activate on the third occurrence of the action

What is the best way to import a typescript file using a provided string?

How to deactivate Kendo Dropdownlist in Angular 2

Angular 5 arrays within arrays

TypeScript: The capability to deduce or derive values for a type from a constant object literal that is nested with non-distinct keys

Exploring nested contexts in react testing library with renderHook

Having issues with Bootstrap customization in an Angular 7 project

Integrating Angular 2 with Java functionalities and JSP

Is there a way to switch an input's appearance to resemble that of a label?

The TypeScript 'object' type

"Receiving HTML response from an HTTP GET request in Angular 2

What could be causing the error message (No overload matches this call) to pop up when attempting to subscribe to .valueChanges() in order to retrieve data from Firestore?