From 939f4f7fc33c9f4394610f0c81a63b50aad82c4c Mon Sep 17 00:00:00 2001
From: Michael Berger <m.gonser@icloud.com>
Date: Thu, 13 Apr 2023 20:24:19 +0200
Subject: [PATCH] feat(cdk): add TrackById and TrackByProp directive

---
 libs/cdk/template/src/index.ts                |  3 +++
 .../src/lib/track-by/track-by-id.directive.ts | 23 ++++++++++++++++
 .../lib/track-by/track-by-prop.directive.ts   | 26 +++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 libs/cdk/template/src/lib/track-by/track-by-id.directive.ts
 create mode 100644 libs/cdk/template/src/lib/track-by/track-by-prop.directive.ts

diff --git a/libs/cdk/template/src/index.ts b/libs/cdk/template/src/index.ts
index 63c4656..13b3ab1 100644
--- a/libs/cdk/template/src/index.ts
+++ b/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';
diff --git a/libs/cdk/template/src/lib/track-by/track-by-id.directive.ts b/libs/cdk/template/src/lib/track-by/track-by-id.directive.ts
new file mode 100644
index 0000000..dbbe683
--- /dev/null
+++ b/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 {}
diff --git a/libs/cdk/template/src/lib/track-by/track-by-prop.directive.ts b/libs/cdk/template/src/lib/track-by/track-by-prop.directive.ts
new file mode 100644
index 0000000..88b29f2
--- /dev/null
+++ b/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 {}