feat(cdk): add TrackById and TrackByProp directive

Author: michaelbe812

libs/cdk/template/src/index.ts

@@ -1,2 +1,5 @@
 export * from './lib/rx-if-list/rx-if-list.directive';
 export * from './lib/fn/fn.pipe';
+
+export * from './lib/track-by/track-by-id.directive';
+export * from './lib/track-by/track-by-prop.directive';

libs/cdk/template/src/lib/track-by/track-by-id.directive.ts

@@ -0,0 +1,23 @@
+import {Directive, Host, NgModule} from '@angular/core';
+import {CommonModule, NgForOf} from '@angular/common';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[ngForTrackById]',
+})
+export class TrackByIdDirective<T extends {id: unknown}> {
+
+  constructor(@Host() private ngFor: NgForOf<T>) {
+    if (!ngFor){
+      throw new Error('ngForTrackById must be used with ngFor');
+    }
+    this.ngFor.ngForTrackBy = (index: number, item: T) => item.id;
+  }
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [TrackByIdDirective],
+  exports: [TrackByIdDirective],
+})
+export class TrackByIdDirectiveModule {}

libs/cdk/template/src/lib/track-by/track-by-prop.directive.ts

@@ -0,0 +1,26 @@
+import {Directive, Host, Input, NgModule} from '@angular/core';
+import {CommonModule, NgForOf} from '@angular/common';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[ngForTrackByProp]',
+})
+export class TrackByPropDirective<T> {
+  @Input() ngForTrackByProp!: keyof T;
+
+  constructor(@Host() private ngFor: NgForOf<T>) {
+    if (!ngFor){
+      throw new Error('ngForTrackByProp must be used with ngFor');
+    }
+
+    this.ngFor.ngForTrackBy = (index: number, item: T) =>
+      item[this.ngForTrackByProp];
+  }
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [TrackByPropDirective],
+  exports: [TrackByPropDirective],
+})
+export class TrackByPropDirectiveModule {}