Angular global trackBy property directive with strict type checking.

Nigro Simone

Last update: Nov 23, 2022

Related tags

Angular angular

Overview

NgForTrackByProperty

Angular global trackBy property directive with strict type checking.

Description

When displaying a list of data (at least somewhat large lists) you should be using Angular's trackBy feature which looks something like:

{{ item.id }} {{ item.name }} `, }) export class AppListComponent { public list: Array
= [ { id: 0, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' }, ]; public trackById(index: number, item: Item) { return item.id; } }">
import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    
    

        {{ item.id }} {{ item.name }}
      

    
    
  `,
})
export class AppListComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];

  public trackById(index: number, item: Item) {
    return item.id;
  }
}

Unfortunately, Angular forces us to write a tracking function in each component in which we want to make use of trackBy. With ng-for-track-by-property you could just handle this entirely in the template by passing a property like this:

{{ item.id }} {{ item.name }} `, }) export class AppListComponent { public list: Array
= [ { id: 0, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' }, ]; }">
import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    
    

        {{ item.id }} {{ item.name }}
      

    
    
  `,
})
export class AppListComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

ng-for-track-by-property has strict type checking and only available property are allowed

See the stackblitz demo.

Features

✅ trackBy property name
✅ Type casting
✅ trackBy index

Get Started

Step 1: install ng-for-track-by-property

npm i ng-for-track-by-property

Step 2: Import NgForTrackByPropertyModule into your app module, eg.:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { NgForTrackByPropertyModule } from 'ng-for-track-by-property';

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

Step 3: add trackByProperty to your ngFor, eg.:

{{ item.id }} {{ item.name }} `, }) export class AppComponent { public list: Array
= [ { id: 0, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' }, ]; }">
import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    
    

        {{ item.id }} {{ item.name }}
      

    
    
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

you can also track by index with trackByIndex, eg.:

{{ item.id }} {{ item.name }} `, }) export class AppComponent { public list: Array
= [ { id: 0, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' }, ]; }">
import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    
    

        {{ item.id }} {{ item.name }}
      

    
    
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

since track by property id is a very common case, there is also trackById:

{{ item.id }} {{ item.name }} `, }) export class AppComponent { public list: Array
= [ { id: 0, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' }, ]; }">
import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    
    

        {{ item.id }} {{ item.name }}
      

    
    
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

Available directives

Directive	HTML template sintax	TrackBy function
trackByProperty: key	`*ngFor="let item of arr; trackByProperty: 'id'"`	`(index, item) => item[key]`
trackByIndex	`*ngFor="let item of arr; trackByIndex"`	`(index, item) => index`
trackById	`*ngFor="let item of arr; trackById"`	`(index, item) => item.id`

Support

This is an open-source project. Star this repository, if you like it, or even donate. Thank you so much!

My other libraries

I have published some other Angular libraries, take a look:

Angular UI Component Library based on Ant Design

NG-ZORRO An enterprise-class Angular UI component library based on Ant Design. English | 简体中文 ✨ Features An enterprise-class UI design system for Angu

Jan 6, 2023

Angular 2 building blocks :package: based on Semantic UI

Angular2 & Semantic UI Angular2 - Semantic UI Live demo ng-semantic.herokuapp.com Angular 2 Semantic UI version: 2.2.2 Installation npm install ng-sem

Dec 23, 2022

Native Angular components & directives for Lightning Design System

ng-lightning This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS f

Dec 8, 2022

Native AngularJS (Angular) directives for Bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

Jan 3, 2023

NG Bootstrap - Angular powered Bootstrap widgets

NG Bootstrap - Angular powered Bootstrap widgets Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angula

Dec 24, 2022

🚀 Style and Component Library for Angular

ngx-ui Component & Style Library for Angular by Swimlane. Installing npm i @swimlane/ngx-ui --S Install the project's peer depencencies (moment, codem

Dec 24, 2022

Lightweight, Material Design inspired go to top button. No dependencies. Pure Angular!

Angular ScrollTop Button Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular! ✓ Angular 13, Ivy

Dec 18, 2022

The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

ngx-bootstrap The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular Links Documentation Release Notes Slack

Jan 8, 2023