Primeng 15- How to Override Default Sort Icon in Angular 15?

Angular is a powerful, open-source web application framework maintained by Google. Using angular you can build dynamic, single-page applications (SPAs) with multiple tools and features provided in angular material. Angular supports TypeScript, to provide a strong typing system and improved tooling.

Steps To Implement Primeng in Angular App

Step 1: Install Angular CLI:

npm install -g @angular/cli

Step 2: Create an Angular application using the following command:

ng new prime-angular 
cd prime-angular

Step 3: Run the Application

ng serve

Project Structure

We have created our angular application, now let's install Prime NG and Prime Icons

Step 1: Install PrimeNG and Prime Icons

npm install primeng primeicons

Step 2: Import Table Module in app.module.ts

import { TableModule } from 'primeng/table'

Dependencies

"dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "primeicons": "^6.0.1",
    "primeng": "^14.2.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
}

Step 3: Insert Prime and Prime Icons CSS files in style.css.

Let's create a table using Prime NG:

<!-- app.component.html -->

<p-table [value]="products" [tableStyle]="{ 'min-width': '60rem' }">
    <ng-template pTemplate="header">
        <tr>
            <th pSortableColumn="code" style="width: 20%">
                Code <p-sortIcon field="code" />
            </th>
            <th pSortableColumn="name" style="width: 20%">
                Name <p-sortIcon field="name" />
            </th>
            <th pSortableColumn="category" style="width: 20%">
                Category <p-sortIcon field="category" />
            </th>
            <th pSortableColumn="quantity" style="width: 20%">
                Quantity <p-sortIcon field="quantity" />
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
        <tr>
            <td>{{ product.code }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.quantity }}</td>
        </tr>
    </ng-template>
</p-table>

/* Write CSS Here */
/*style.css*/ 
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";

//app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    products = [
        {
            code: 'f230fh0g3',
            name: 'Bamboo Watch',
            category: 'Accessories',
            quantity: 24,
        },
        {
            code: 'nvklal433',
            name: 'Black Watch',
            category: 'Accessories',
            quantity: 61,
        },
        {
            code: 'zz21cz3c1',
            name: 'Blue Band',
            category: 'Fitness',
            quantity: 2,
        },
    ];
}

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TableModule } from 'primeng/table';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AppRoutingModule, TableModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }

Save your files and navigate to your browser:

Override default sort icon

In your app.component.ts we will create a function onSort and 2 variables naming as sortField and sortOrder:

//app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'prime-angular';
    sortField: string = '';
    sortOrder: number = 1;

    onSort(event: any) {
        this.sortField = event.field;
        this.sortOrder = event.order;
    }

    products = [
        {
            code: 'f230fh0g3',
            name: 'Bamboo Watch',
            category: 'Accessories',
            quantity: 24,
        },
        {
            code: 'nvklal433',
            name: 'Black Watch',
            category: 'Accessories',
            quantity: 61,
        },
        {
            code: 'zz21cz3c1',
            name: 'Blue Band',
            category: 'Fitness',
            quantity: 2,
        },
    ];
}

To override the sort method will call this onSort method in the table, your <p-table > tag should look like this

<p-table [value]="products" [tableStyle]="{'min-width': '60rem'}" (onSort)="onSort($event)">
    /// Content
</p-table>

Now let's say we want to override the sort icon for Code column, we will use primeicons, when no sorting is applied on Code column we will show pi-align-center icon, when sorting is applied we will show pi-angle-down and pi-angle-up when not applied.

Replace the first th with code provided below:

<th pSortableColumn="code" style="width:20%">
    Code <i class="pi" [ngClass]="{ 
        'pi-align-center': sortField !== 'code' || sortOrder === null,
         'pi-angle-up': sortField === 'code' && sortOrder === 1,
         'pi-angle-down': sortField === 'code' && sortOrder === -1
    }"></i>
</th>

Output