From f49243677d71b983ef02925850291db94258dce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Wed, 29 Nov 2023 15:28:54 +0300
Subject: [PATCH] add trackby

---
 .../showcase/layout/doc/app.docsection.component.ts    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/showcase/layout/doc/app.docsection.component.ts b/src/app/showcase/layout/doc/app.docsection.component.ts
index 882cc42d4c6..7d7fa1a0c1f 100644
--- a/src/app/showcase/layout/doc/app.docsection.component.ts
+++ b/src/app/showcase/layout/doc/app.docsection.component.ts
@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core';
 import { Doc } from 'src/app/showcase/domain/doc';
 
 @Component({
     selector: 'app-docsection',
     template: `
         <ng-container *ngIf="docs && docs.length">
-            <section class="py-4" *ngFor="let doc of docs">
+            <section class="py-4" *ngFor="let doc of docs; trackBy: trackById">
                 <ng-container *ngIf="!doc.component && doc.children">
                     <app-docsectiontext [title]="doc.label" [id]="doc.id" [level]="2" />
 
@@ -23,7 +23,7 @@ import { Doc } from 'src/app/showcase/domain/doc';
         </ng-container>
 
         <ng-container *ngIf="apiDocs && apiDocs.length">
-            <section class="py-4" *ngFor="let doc of apiDocs">
+            <section class="py-4" *ngFor="let doc of apiDocs; trackBy: trackById">
                 <ng-container *ngIf="doc.children">
                     <app-docsectiontext [title]="doc.label" [id]="doc.id" [description]="doc.description" [level]="2" />
 
@@ -40,4 +40,8 @@ export class AppDocSectionsComponent {
     @Input() docs!: Doc[];
 
     @Input() apiDocs!: any[];
+
+    trackById(doc) {
+        return doc.id || undefined;
+    }
 }