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;
+    }
 }