ngx-header-sort

A simple directive to add icons to display sorting status of tables and automatically flip the icon for ascending/descending.

Table of contents

• ngx-header-sort
  • Table of contents
  • Demo
  • Installation
    • NPM
  • Getting started
  • Customisation
    • Styles

Demo

For a demo, download the repository, then run the following commands

npm run watch:lib
npm start

The first command will compile ngx-header-sort, the second command will open a demo site that shows this working.

Installation

Install ngx-header-sort via NPM, using the command below.

NPM

npm install --save ngx-header-sort

Getting started

First thing is to include the styles file. In your styles file include the following line:

@import '../node_modules/ngx-header-sort/assets/ngx-header-sort.scss';

Import the NgxHeaderSortModule in your root application module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxHeaderSortModule } from 'ngx-header-sort';

@NgModule({
  //...
  imports: [
    //...
    NgxHeaderSortModule.forRoot()
  ],
  //...
})
export class AppModule { }

You must mark a HTML element as being an element that will have the sort icon appended within it.

<div ngxHeaderSort></div>

This will create a new element within this marked HTML element that will display the icon. This can be customised using CSS classes. See Customisation.

Customisation

There is only one thing that you can customise and that is the default icon to display when displaying that you are sorting in the ascending direction. This is setup as part of the initial module setup.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxHeaderSortModule } from 'ngx-header-sort';

@NgModule({
  //...
  imports: [
    //...
    NgxHeaderSortModule.forRoot({
        config: {
            ascendingIconClass: 'fas fa-arrow-up'
        }
    })
  ],
  //...
})
export class AppModule { }

Styles

You also want to include the styles for the library as this is where the animation is contained.

@import 'ngx-header-sort/assets/ngx-header-sort.scss';