Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nigrosimone/ng-for-track-by-property
Angular global trackBy property directive with strict type checking.
https://github.com/nigrosimone/ng-for-track-by-property
angular angular2
Last synced: 23 days ago
JSON representation
Angular global trackBy property directive with strict type checking.
- Host: GitHub
- URL: https://github.com/nigrosimone/ng-for-track-by-property
- Owner: nigrosimone
- License: mit
- Created: 2022-03-01T19:00:47.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-01T14:10:52.000Z (about 2 months ago)
- Last Synced: 2024-12-27T02:10:27.219Z (30 days ago)
- Topics: angular, angular2
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-for-track-by-property
- Size: 5.27 MB
- Stars: 30
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-for-track-by-property - Angular global trackBy property directive with strict type checking. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-for-track-by-property - Angular global trackBy property directive with strict type checking. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-for-track-by-property - Angular global trackBy property directive with strict type checking. (Table of contents / Third Party Components)
README
# NgForTrackByProperty [](https://app.travis-ci.com/nigrosimone/ng-for-track-by-property) [](https://coveralls.io/github/nigrosimone/ng-for-track-by-property?branch=main) [](https://www.npmjs.com/package/ng-for-track-by-property)
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:
```ts
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 = [
{ 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:
```ts
import { Component } from '@angular/core';
import { NgForTrackByPropertyDirective } from 'ng-for-track-by-property';
interface Item {
id: number;
name: string;
}
@Component({
selector: 'app-root',
imports: [NgForTrackByPropertyDirective],
template: `
-
{{ item.id }} {{ item.name }}
`,
})
export class AppListComponent {
public list: Array = [
{ 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](https://stackblitz.com/edit/demo-ng-for-track-by-property?file=src%2Fapp%2Fapp.component.ts).
## Features
✅ trackBy property name
✅ Type casting
✅ trackBy index
## Get Started
*Step 1*: install `ng-for-track-by-property`
```bash
npm i ng-for-track-by-property
```
*Step 2*: add `trackByProperty` to your `ngFor`, eg.:
```ts
import { Component } from '@angular/core';
import { NgForTrackByPropertyDirective } from 'ng-for-track-by-property';
interface Item {
id: number;
name: string;
}
@Component({
selector: 'app-root',
imports: [NgForTrackByPropertyDirective],
template: `
-
{{ item.id }} {{ item.name }}
`,
})
export class AppComponent {
public list: Array = [
{ id: 0, name: 'foo' },
{ id: 1, name: 'bar' },
{ id: 2, name: 'baz' },
];
}
```
you can also track by index with `trackByIndex`, eg.:
```ts
import { Component } from '@angular/core';
import { NgForTrackByIndexDirective } from 'ng-for-track-by-property';
interface Item {
id: number;
name: string;
}
@Component({
selector: 'app-root',
imports: [NgForTrackByIndexDirective],
template: `
-
{{ item.id }} {{ item.name }}
`,
})
export class AppComponent {
public list: Array = [
{ 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`:
```ts
import { Component } from '@angular/core';
import { NgForTrackByIdDirective } from 'ng-for-track-by-property';
interface Item {
id: number;
name: string;
}
@Component({
selector: 'app-root',
imports: [NgForTrackByIdDirective],
template: `
-
{{ item.id }} {{ item.name }}
`,
})
export class AppComponent {
public list: Array = [
{ id: 0, name: 'foo' },
{ id: 1, name: 'bar' },
{ id: 2, name: 'baz' },
];
}
```
## Available directives
| Directive | HTML template syntax | 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](https://github.com/nigrosimone/ng-for-track-by-property), if you like it, or even [donate](https://www.paypal.com/paypalme/snwp). Thank you so much!
## My other libraries
I have published some other Angular libraries, take a look:
- [NgSimpleState: Simple state management in Angular with only Services and RxJS](https://www.npmjs.com/package/ng-simple-state)
- [NgHttpCaching: Cache for HTTP requests in Angular application](https://www.npmjs.com/package/ng-http-caching)
- [NgGenericPipe: Generic pipe for Angular application for use a component method into component template.](https://www.npmjs.com/package/ng-generic-pipe)
- [NgLet: Structural directive for sharing data as local variable into html component template](https://www.npmjs.com/package/ng-let)