From 337a205288a4c7d5d48d665b47b15399850abb4d Mon Sep 17 00:00:00 2001
From: elenagarrone <8397116+elenagarrone@users.noreply.github.com>
Date: Thu, 11 Dec 2025 09:05:07 +0000
Subject: [PATCH 1/3] refactor: update leftovers ngIf and ngFor in specs and
 stories

---
 .../lib/accordion/docs/accordion.stories.ts   | 21 ++++++-
 .../src/lib/card/docs/card/card.stories.ts    | 49 ++++++++-------
 .../docs/promotions/promotions.stories.ts     |  4 +-
 .../src/lib/footer/docs/footer.stories.ts     | 51 +++++++++-------
 .../checkbox-group.component.spec.ts          |  2 -
 .../src/lib/forms/input/docs/input.stories.ts | 60 +++++++++++--------
 .../forms/input/input-field.component.spec.ts |  5 +-
 .../forms/radio/docs/radio/radio.stories.ts   |  4 +-
 .../radio/docs/segment/segment.stories.ts     |  4 +-
 .../lib/forms/select/docs/select.stories.ts   |  8 ++-
 .../forms/sort-code/docs/sort-code.stories.ts |  4 +-
 .../docs/checkbox/checkbox-group.stories.ts   |  4 +-
 .../lib/forms/toggle/docs/checkbox/guide.mdx  |  4 +-
 .../src/lib/forms/validation/docs/guide.mdx   | 16 +++--
 .../lib/link-menu/docs/link-menu.stories.ts   | 27 +++++----
 .../canopy/src/lib/list/docs/lists.stories.ts | 32 +++++-----
 .../canopy/src/lib/page/docs/page.stories.ts  | 19 +++---
 .../lib/promo-card/docs/promo-card.stories.ts | 41 ++++++-------
 .../src/lib/side-nav/docs/side-nav.stories.ts | 36 +++++------
 .../lib/spacing/margin/docs/margin.stories.ts | 26 ++++----
 .../spacing/padding/docs/padding.stories.ts   | 23 ++++---
 .../src/lib/spinner/docs/spinner.stories.ts   |  4 +-
 .../src/lib/sr-alert-message/docs/guide.mdx   |  4 +-
 .../src/lib/table/docs/table.stories.ts       | 40 +++++++------
 .../lib/table/table/table.component.spec.ts   | 16 ++---
 .../src/lib/tabs/docs/tab-nav-bar.stories.ts  | 12 ++--
 .../canopy/src/lib/tabs/docs/tabs.stories.ts  | 14 +++--
 27 files changed, 303 insertions(+), 227 deletions(-)

diff --git a/projects/canopy/src/lib/accordion/docs/accordion.stories.ts b/projects/canopy/src/lib/accordion/docs/accordion.stories.ts
index 234993787..224fddf89 100644
--- a/projects/canopy/src/lib/accordion/docs/accordion.stories.ts
+++ b/projects/canopy/src/lib/accordion/docs/accordion.stories.ts
@@ -14,7 +14,12 @@ const accordionItems = `
 <lg-accordion-item [isActive]="itemOneActive"
                    (opened)="toggle('Item 1 opened')"
                    (closed)="toggle('Item 1 closed')">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForFirstAccordionItem" [name]="iconForFirstAccordionItem"></lg-icon>Item 1</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForFirstAccordionItem) {
+      <lg-icon [name]="iconForFirstAccordionItem"></lg-icon>
+    }
+    Item 1
+  </lg-accordion-panel-heading>
 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua.</p>
@@ -22,7 +27,12 @@ const accordionItems = `
 <lg-accordion-item [isActive]="itemTwoActive"
                    (opened)="toggle('Item 3 opened')"
                    (closed)="toggle('Item 2 closed')">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForSecondAccordionItem" [name]="iconForSecondAccordionItem"></lg-icon>Item 2</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForSecondAccordionItem) {
+      <lg-icon [name]="iconForSecondAccordionItem"></lg-icon>
+    }
+    Item 2
+  </lg-accordion-panel-heading>
 
   <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in
@@ -33,7 +43,12 @@ const accordionItems = `
   </button>
 </lg-accordion-item>
 <lg-accordion-item [isActive]="itemThreeActive">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForThirdAccordionItem" [name]="iconForThirdAccordionItem"></lg-icon>Item 3 is Lazy</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForThirdAccordionItem) {
+      <lg-icon [name]="iconForThirdAccordionItem"></lg-icon>
+    }
+    Item 3 is Lazy
+  </lg-accordion-panel-heading>
 
   <ng-template lgAccordionItemContent>
     <p>This panel content is only initialised when opened</p>
diff --git a/projects/canopy/src/lib/card/docs/card/card.stories.ts b/projects/canopy/src/lib/card/docs/card/card.stories.ts
index 23ce34af7..f3e064ac7 100644
--- a/projects/canopy/src/lib/card/docs/card/card.stories.ts
+++ b/projects/canopy/src/lib/card/docs/card/card.stories.ts
@@ -71,7 +71,9 @@ const formJourneyTemplate = `
 
                     <lg-input-field [block]="true">
                       {{label}}
-                      <lg-hint *ngIf="hint">{{hint}}</lg-hint>
+                      @if (hint) {
+                        <lg-hint>{{hint}}</lg-hint>
+                      }
                       <input lgInput formControlName="accountNumber" size="8" />
                     </lg-input-field>
                   </div>
@@ -177,12 +179,12 @@ const showMoreCardTemplate = `
       <div lgMarginTop="5">
         <button lg-button type="button" variant="link" lgButtonToggle (toggleActive)="toggleActive($event)"
                 lgMarginBottom="none">
-          <ng-container *ngIf="isToggleActive">
+          @if (isToggleActive) {
             Show less
-          </ng-container>
-          <ng-container *ngIf="!isToggleActive">
+          }
+          @if (!isToggleActive) {
             Show more
-          </ng-container>
+          }
         </button>
       </div>
     </lg-card-content>
@@ -257,14 +259,16 @@ const dataPointsCardTemplate = `
   </lg-card-header>
   <lg-card-content>
     <lg-card-content-inner-data-points>
-      <lg-data-point *ngFor="let number of [].constructor(dataPoints); let i = index;">
-        <lg-data-point-label [headingLevel]="3">
-          {{data[i].label}}
-        </lg-data-point-label>
-        <lg-data-point-value>
-          {{data[i].value}}
-        </lg-data-point-value>
-      </lg-data-point>
+      @for (number of [].constructor(dataPoints); track $index; let i = $index) {
+        <lg-data-point>
+          <lg-data-point-label [headingLevel]="3">
+            {{data[i].label}}
+          </lg-data-point-label>
+          <lg-data-point-value>
+            {{data[i].value}}
+          </lg-data-point-value>
+        </lg-data-point>
+      }
     </lg-card-content-inner-data-points>
   </lg-card-content>
   <lg-card-footer lgPaddingTop="none">
@@ -328,15 +332,16 @@ const cardGroupTemplate = `
             explicabo.
           </lg-card-content>
         </lg-card>
-        <lg-card *ngFor="let i of [].constructor(additionalCards)">
-          <lg-card-header>
-            <lg-card-navigation-title title="External link title" link="https://www.landg.com"
-                                      headingLevel="2"></lg-card-navigation-title>
-          </lg-card-header>
-          <lg-card-content>
-            {{ cardContent }} <a href="#">Test link</a>.
-          </lg-card-content>
-          <lg-card-footer lgMarginTop="5" lgPaddingTop="none">
+        @for (i of [].constructor(additionalCards); track $index) {
+          <lg-card>
+            <lg-card-header>
+              <lg-card-navigation-title title="External link title" link="https://www.landg.com"
+                                        headingLevel="2"></lg-card-navigation-title>
+            </lg-card-header>
+            <lg-card-content>
+              {{ cardContent }} <a href="#">Test link</a>.
+            </lg-card-content>
+            <lg-card-footer lgMarginTop="5" lgPaddingTop="none">
             <lg-link-menu>
               <a href="" target="_blank">
                 <lg-link-menu-item>
diff --git a/projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts b/projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts
index 35b303968..367c96046 100644
--- a/projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts
+++ b/projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts
@@ -26,7 +26,9 @@ const promotionsGeneralCardTemplate = `
   <lg-card-hero-img
     [cover]="true"
     [src]="hasIcon ? '' : imgUrl">
-    <lg-brand-icon *ngIf="hasIcon" [name]="iconName" size="xs"></lg-brand-icon>
+    @if (hasIcon) {
+      <lg-brand-icon [name]="iconName" size="xs"></lg-brand-icon>
+    }
   </lg-card-hero-img>
   <lg-card-content>
     <h3 lgMarginBottom="2" class="lg-font--expressive">{{ title }}</h3>
diff --git a/projects/canopy/src/lib/footer/docs/footer.stories.ts b/projects/canopy/src/lib/footer/docs/footer.stories.ts
index f279057af..057af9ee1 100644
--- a/projects/canopy/src/lib/footer/docs/footer.stories.ts
+++ b/projects/canopy/src/lib/footer/docs/footer.stories.ts
@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
-import { NgFor, NgIf } from '@angular/common';
 
 import { LgFooterComponent } from '../footer.component';
 import { LgFooterNavComponent } from '../footer-nav/footer-nav.component';
@@ -51,8 +50,6 @@ export default {
         LgFooterNavItemComponent,
         LgFooterLogoComponent,
         LgFooterCopyrightComponent,
-        NgIf,
-        NgFor,
       ],
     }),
   ],
@@ -96,19 +93,23 @@ export default {
 const template = `
 <footer lg-footer>
   <lg-footer-nav variant="primary">
-    <lg-footer-nav-item *ngFor="let primaryLink of primaryLinks">
-      <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (primaryLink of primaryLinks; track primaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a *ngIf="!secondaryLink.isButton; else button" [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-
-      <ng-template #button>
-        <button [class]="secondaryLink.class" [id]="secondaryLink.id">{{ secondaryLink.text }}</button>
-      </ng-template>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        @if (!secondaryLink.isButton) {
+          <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+        } @else {
+          <button [class]="secondaryLink.class" [id]="secondaryLink.id">{{ secondaryLink.text }}</button>
+        }
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
@@ -154,9 +155,11 @@ export const StandardFooter = {
 const compactTemplate = `
 <footer lg-footer>
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-copyright>{{ copyright }}</lg-footer-copyright>
@@ -212,15 +215,19 @@ export const CompactFooter = {
 const coBrandedTemplate = `
 <footer lg-footer>
   <lg-footer-nav variant="primary">
-    <lg-footer-nav-item *ngFor="let primaryLink of primaryLinks">
-      <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (primaryLink of primaryLinks; track primaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
diff --git a/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts b/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts
index 9556d9035..d46497a9c 100644
--- a/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts
+++ b/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts
@@ -11,7 +11,6 @@ import {
 } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockComponents } from 'ng-mocks';
-import { NgIf } from '@angular/common';
 
 import { LgHintComponent } from '../hint';
 import { LgErrorStateMatcher } from '../validation';
@@ -99,7 +98,6 @@ describe('LgCheckboxGroupComponent', () => {
         LgToggleComponent,
         LgValidationComponent,
         LgHintComponent,
-        NgIf,
         MockComponents(LgIconComponent),
       ],
       providers: [
diff --git a/projects/canopy/src/lib/forms/input/docs/input.stories.ts b/projects/canopy/src/lib/forms/input/docs/input.stories.ts
index 36a3c7dc2..309521170 100644
--- a/projects/canopy/src/lib/forms/input/docs/input.stories.ts
+++ b/projects/canopy/src/lib/forms/input/docs/input.stories.ts
@@ -93,32 +93,42 @@ function setupInputStoryValues(obj, code, config?: Config) {
 const inputTemplate = `
 <lg-input-field [block]="block" [showLabel]="showLabel">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
-  <span lgPrefix *ngIf="showTextPrefix">{{ prefix }}</span>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
+  @if (showTextPrefix) {
+    <span lgPrefix>{{ prefix }}</span>
+  }
   <input lgInput formControlName="name" [size]="size" />
-  <button
-    lg-button
-    lgSuffix
-    size="sm"
-    [iconButton]="true"
-    variant="add-on"
-    *ngIf="showButtonFirstSuffix"
-  >
-    Close
-    <lg-icon name="close"></lg-icon>
-  </button>
-  <button
-    lg-button
-    lgSuffix
-    size="sm"
-    [iconButton]="iconButton"
-    [variant]="buttonVariant"
-    *ngIf="showButtonSecondSuffix"
-  >
-    {{ buttonText }}
-    <lg-icon [name]="icon" *ngIf="iconButton"></lg-icon>
-  </button>
-  <span lgSuffix *ngIf="showTextSuffix">{{ suffix }}</span>
+  @if (showButtonFirstSuffix) {
+    <button
+      lg-button
+      lgSuffix
+      size="sm"
+      [iconButton]="true"
+      variant="add-on"
+    >
+      Close
+      <lg-icon name="close"></lg-icon>
+    </button>
+  }
+  @if (showButtonSecondSuffix) {
+    <button
+      lg-button
+      lgSuffix
+      size="sm"
+      [iconButton]="iconButton"
+      [variant]="buttonVariant"
+    >
+      {{ buttonText }}
+      @if (iconButton) {
+        <lg-icon [name]="icon"></lg-icon>
+      }
+    </button>
+  }
+  @if (showTextSuffix) {
+    <span lgSuffix>{{ suffix }}</span>
+  }
 </lg-input-field>
 `;
 
diff --git a/projects/canopy/src/lib/forms/input/input-field.component.spec.ts b/projects/canopy/src/lib/forms/input/input-field.component.spec.ts
index d2ab5117e..29bbfee12 100644
--- a/projects/canopy/src/lib/forms/input/input-field.component.spec.ts
+++ b/projects/canopy/src/lib/forms/input/input-field.component.spec.ts
@@ -3,13 +3,11 @@ import { TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockComponents, MockedComponentFixture, MockRender, ngMocks } from 'ng-mocks';
-import { NgIf } from '@angular/common';
 
 import { LgHintComponent } from '../hint';
 import { LgLabelComponent } from '../label';
-import { LgValidationComponent } from '../validation';
+import { LgErrorStateMatcher, LgValidationComponent } from '../validation';
 import { LgButtonComponent } from '../../button';
-import { LgErrorStateMatcher } from '../validation';
 import { LgPrefixDirective } from '../../prefix';
 import { LgSuffixDirective } from '../../suffix';
 import { LgIconComponent } from '../../icon';
@@ -51,7 +49,6 @@ describe('LgInputFieldComponent', () => {
         LgSuffixDirective,
         LgPrefixDirective,
         LgLabelComponent,
-        NgIf,
         MockComponents(LgButtonComponent, LgIconComponent),
       ],
       providers: [
diff --git a/projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts b/projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts
index ec46501ab..5c64d4e2a 100644
--- a/projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts
+++ b/projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts
@@ -14,7 +14,9 @@ const formTemplate = `
 <form [formGroup]="form">
   <lg-radio-group [inline]="inline" [focus]="focus" formControlName="color">
     {{ label }}
-    <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+    @if (hint) {
+      <lg-hint>{{ hint }}</lg-hint>
+    }
     <lg-radio-button value="red" [size]="size" (blur)="radioBlur.emit($event)">Red</lg-radio-button>
     <lg-radio-button value="yellow" [size]="size" (blur)="radioBlur.emit($event)"
       >Yellow
diff --git a/projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts b/projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts
index 1a318431a..496e960ed 100644
--- a/projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts
+++ b/projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts
@@ -14,7 +14,9 @@ import { LgHintComponent } from '../../../hint';
 const segmentTemplate = `
 <lg-segment-group [inline]="inline" [focus]="focus" [stack]="stack" formControlName="color">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
   <lg-segment-button value="red" (blur)="segmentBlur.emit($event)">Red</lg-segment-button>
   <lg-segment-button value="yellow" (blur)="segmentBlur.emit($event)">Yellow</lg-segment-button>
   <lg-segment-button value="green" (blur)="segmentBlur.emit($event)">Green</lg-segment-button>
diff --git a/projects/canopy/src/lib/forms/select/docs/select.stories.ts b/projects/canopy/src/lib/forms/select/docs/select.stories.ts
index 9b8dbf954..e3dc44ffa 100644
--- a/projects/canopy/src/lib/forms/select/docs/select.stories.ts
+++ b/projects/canopy/src/lib/forms/select/docs/select.stories.ts
@@ -13,9 +13,13 @@ import { LgSelectDirective } from '../select.directive';
 const template = `
 <lg-select-field [block]="block">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
   <select lgSelect formControlName="color">
-    <option *ngFor="let option of options" [value]="option">{{ option }}</option>
+    @for (option of options; track option) {
+      <option [value]="option">{{ option }}</option>
+    }
   </select>
 </lg-select-field>
 `;
diff --git a/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts b/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
index 823c7e89e..057c59d03 100644
--- a/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
+++ b/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
@@ -13,7 +13,9 @@ import { LgHintComponent } from '../../hint';
 const template = `
 <lg-input-field>
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
   <input lgInput lgSortCode formControlName="sortCode" />
 </lg-input-field>
 `;
diff --git a/projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts b/projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts
index d6e336595..3194f21a9 100644
--- a/projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts
+++ b/projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts
@@ -14,7 +14,9 @@ const formTemplate = `
 <form [formGroup]="form">
   <lg-checkbox-group [inline]="inline" [focus]="focus" formControlName="colors">
     {{ label }}
-    <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+    @if (hint) {
+      <lg-hint>{{ hint }}</lg-hint>
+    }
     <lg-toggle value="red" (blur)="checkboxBlur.emit($event)">Red</lg-toggle>
     <lg-toggle value="yellow" (blur)="checkboxBlur.emit($event)">Yellow</lg-toggle>
   </lg-checkbox-group>
diff --git a/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx b/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx
index 0dfdc474d..bebd855b8 100644
--- a/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx
+++ b/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx
@@ -57,7 +57,9 @@ and in your HTML:
 ```html
 <lg-checkbox-group [inline]="inline" [focus]="focus" formControlName="colors">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
   <lg-toggle value="red" (blur)="checkboxBlur.emit($event)">Red</lg-toggle>
   <lg-toggle value="yellow" (blur)="checkboxBlur.emit($event)">Yellow</lg-toggle>
 </lg-checkbox-group>
diff --git a/projects/canopy/src/lib/forms/validation/docs/guide.mdx b/projects/canopy/src/lib/forms/validation/docs/guide.mdx
index 17775c34a..87196bce1 100644
--- a/projects/canopy/src/lib/forms/validation/docs/guide.mdx
+++ b/projects/canopy/src/lib/forms/validation/docs/guide.mdx
@@ -66,12 +66,16 @@ In your HTML, add the validation components with the appropriate structural dire
       Text
       <input lgInput formControlName="username" />
       <lg-hint>This is a standard input field</lg-hint>
-    <lg-validation *ngIf="isControlInvalid(text, userForm) && text.hasError('required')">
-      Username is a required field
-    </lg-validation>
-    <lg-validation *ngIf="isControlInvalid(text, validationForm) && text.hasError('minlength')">
-      Username needs to be at least 4 characters
-    </lg-validation>
+    @if (isControlInvalid(text, userForm) && text.hasError('required')) {
+      <lg-validation>
+        Username is a required field
+      </lg-validation>
+    }
+    @if (isControlInvalid(text, validationForm) && text.hasError('minlength')) {
+      <lg-validation>
+        Username needs to be at least 4 characters
+      </lg-validation>
+    }
   </lg-input-field>
 </form>
 ```
diff --git a/projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts b/projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts
index fa4391782..28d3d6efc 100644
--- a/projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts
+++ b/projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts
@@ -1,6 +1,5 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
 import { Component, Input } from '@angular/core';
-import { NgFor, NgIf } from '@angular/common';
 
 import { LgIconComponent } from '../../icon';
 import { LgLinkMenuComponent } from '../link-menu.component';
@@ -9,15 +8,21 @@ import { LgLinkMenuItemTextComponent } from '../link-menu-item-text/link-menu-it
 
 const template = `
 <lg-link-menu>
-  <a href="#" *ngFor="let item of menuItems" [attr.target]="item.target">
-    <lg-link-menu-item>
-      <lg-icon [name]="item.icon" *ngIf="item.icon"></lg-icon>
-      <lg-link-menu-item-text isBold="true">{{ item.title }}</lg-link-menu-item-text>
-      <lg-link-menu-item-text *ngIf="item.description">
-        {{ item.description }}
-      </lg-link-menu-item-text>
-    </lg-link-menu-item>
-  </a>
+  @for (item of menuItems; track item.title) {
+    <a href="#" [attr.target]="item.target">
+      <lg-link-menu-item>
+        @if (item.icon) {
+          <lg-icon [name]="item.icon"></lg-icon>
+        }
+        <lg-link-menu-item-text isBold="true">{{ item.title }}</lg-link-menu-item-text>
+        @if (item.description) {
+          <lg-link-menu-item-text>
+            {{ item.description }}
+          </lg-link-menu-item-text>
+        }
+      </lg-link-menu-item>
+    </a>
+  }
 </lg-link-menu>`;
 
 @Component({
@@ -29,8 +34,6 @@ const template = `
     LgLinkMenuItemComponent,
     LgIconComponent,
     LgLinkMenuItemTextComponent,
-    NgFor,
-    NgIf,
   ],
 })
 class LinkMenuStoryComponent {
diff --git a/projects/canopy/src/lib/list/docs/lists.stories.ts b/projects/canopy/src/lib/list/docs/lists.stories.ts
index 35e878da3..1d301316d 100644
--- a/projects/canopy/src/lib/list/docs/lists.stories.ts
+++ b/projects/canopy/src/lib/list/docs/lists.stories.ts
@@ -1,6 +1,6 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 
 import { ListWithIconsVariant } from '../list-with-icons.interface';
 import { LgListWithIconsComponent } from '../list-with-icons.component';
@@ -9,14 +9,20 @@ import { LgListWithExpressiveStylingDirective } from '../list-with-expressive-st
 
 const template = `
 <ul lg-list-with-icons [variant]="variant">
-  <li lg-list-with-icons-item *ngFor="let item of listItems" [iconName]="item.iconName" [iconColour]="colouredIcons ? item.iconColour : null"
-  ><ng-container [ngTemplateOutlet]="item.isLink ? linkText : text" [ngTemplateOutletContext]="{text: item.text}"></ng-container>
-    <ul lg-list-with-icons *ngIf="item.children as children">
-      <li lg-list-with-icons-item *ngFor="let child of children" [iconName]="child.iconName" [iconColour]="colouredIcons ? child.iconColour : null"
-      ><ng-container [ngTemplateOutlet]="child.isLink ? linkText : text" [ngTemplateOutletContext]="{text: child.text}"></ng-container>
-      </li>
-    </ul>
-  </li>
+  @for (item of listItems; track item.text) {
+    <li lg-list-with-icons-item [iconName]="item.iconName" [iconColour]="colouredIcons ? item.iconColour : null"
+    ><ng-container [ngTemplateOutlet]="item.isLink ? linkText : text" [ngTemplateOutletContext]="{text: item.text}"></ng-container>
+      @if (item.children as children) {
+        <ul lg-list-with-icons>
+          @for (child of children; track child.text) {
+            <li lg-list-with-icons-item [iconName]="child.iconName" [iconColour]="colouredIcons ? child.iconColour : null"
+            ><ng-container [ngTemplateOutlet]="child.isLink ? linkText : text" [ngTemplateOutletContext]="{text: child.text}"></ng-container>
+            </li>
+          }
+        </ul>
+      }
+    </li>
+  }
 </ul>
 
 <ng-template #text let-text="text">{{ text }}</ng-template>
@@ -35,13 +41,7 @@ const template = `
     `,
   ],
   standalone: true,
-  imports: [
-    LgListWithIconsComponent,
-    LgListWithIconsItemComponent,
-    NgFor,
-    NgIf,
-    NgTemplateOutlet,
-  ],
+  imports: [ LgListWithIconsComponent, LgListWithIconsItemComponent, NgTemplateOutlet ],
 })
 class ListWithIconsWrapperComponent {
   @Input() variant: ListWithIconsVariant;
diff --git a/projects/canopy/src/lib/page/docs/page.stories.ts b/projects/canopy/src/lib/page/docs/page.stories.ts
index 41ef1dcde..1255991a8 100644
--- a/projects/canopy/src/lib/page/docs/page.stories.ts
+++ b/projects/canopy/src/lib/page/docs/page.stories.ts
@@ -1,6 +1,5 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
 import { Component, Input } from '@angular/core';
-import { NgFor, NgIf } from '@angular/common';
 
 import { primaryLinks, secondaryLinks } from '../../footer/docs/footer.stories';
 import { productHeroHTML } from '../../hero/docs/hero.stories';
@@ -71,15 +70,19 @@ const header = `
 const footer = `
   <footer lg-footer>
     <lg-footer-nav variant="primary">
-      <lg-footer-nav-item *ngFor="let primaryLink of primaryLinks">
-        <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
-      </lg-footer-nav-item>
+      @for (primaryLink of primaryLinks; track primaryLink.id) {
+        <lg-footer-nav-item>
+          <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
+        </lg-footer-nav-item>
+      }
     </lg-footer-nav>
 
     <lg-footer-nav variant="secondary">
-      <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-        <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-      </lg-footer-nav-item>
+      @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+        <lg-footer-nav-item>
+          <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+        </lg-footer-nav-item>
+      }
     </lg-footer-nav>
 
     <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
@@ -192,8 +195,6 @@ export default {
         LgFooterNavItemComponent,
         LgFooterLogoComponent,
         LgFooterCopyrightComponent,
-        NgIf,
-        NgFor,
       ],
     }),
   ],
diff --git a/projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts b/projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts
index 12db5e380..7b7ac87fe 100644
--- a/projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts
+++ b/projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts
@@ -163,26 +163,27 @@ const examplePromoCardTemplate = `
   <lg-promo-card-list-title headingLevel="1">
     {{ title }}
   </lg-promo-card-list-title>
-  <lg-promo-card
-    *ngFor="let card of cards; let i = index"
-    [variant]="variant[i]">
-    <lg-promo-card-image [imageUrl]="card.imageUrl"></lg-promo-card-image>
-    <lg-promo-card-title headingLevel="2">
-      {{ card.title }}
-    </lg-promo-card-title>
-    <lg-promo-card-content>
-      <p>{{ card.content }}</p>
-    </lg-promo-card-content>
-    <lg-promo-card-footer>
-      <button
-        lgMarginBottom="none"
-        lg-button
-        type="button"
-        [variant]="buttonVariants[variants[i]]">
-        {{ card.ctaText }}
-      </button>
-    </lg-promo-card-footer>
-  </lg-promo-card>
+  @for (card of cards; track $index; let i = $index) {
+    <lg-promo-card
+      [variant]="variant[i]">
+      <lg-promo-card-image [imageUrl]="card.imageUrl"></lg-promo-card-image>
+      <lg-promo-card-title headingLevel="2">
+        {{ card.title }}
+      </lg-promo-card-title>
+      <lg-promo-card-content>
+        <p>{{ card.content }}</p>
+      </lg-promo-card-content>
+      <lg-promo-card-footer>
+        <button
+          lgMarginBottom="none"
+          lg-button
+          type="button"
+          [variant]="buttonVariants[variants[i]]">
+          {{ card.ctaText }}
+        </button>
+      </lg-promo-card-footer>
+    </lg-promo-card>
+  }
 </lg-promo-card-list>
 `;
 
diff --git a/projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts b/projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts
index f6ecb241a..f2b419ee1 100644
--- a/projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts
+++ b/projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts
@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core';
 import { moduleMetadata } from '@storybook/angular';
-import { NgFor, NgIf } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 
 import { SideNavBarItem } from '../side-nav.interface';
@@ -18,21 +17,24 @@ import { LgMarginDirective } from '../../spacing';
 const template = `
 <lg-side-nav>
   <lg-side-nav-bar label="Side Nav Demo">
-    <a
-      *ngFor="let item of navItems; index as i"
-      id="side-nav-{{ i }}"
-      href=""
-      (click)="onClick($event, i)"
-      [isActive]="i == selectedNavIndex"
-      lgSideBarNavLink
-    >
-      <lg-side-nav-bar-item>
-        <lg-side-nav-bar-item-heading>{{ item.title }}</lg-side-nav-bar-item-heading>
-        <lg-side-nav-bar-item-content *ngIf="item.description">{{
-          item.description
-        }}</lg-side-nav-bar-item-content>
-      </lg-side-nav-bar-item>
-    </a>
+    @for (item of navItems; track $index; let i = $index) {
+      <a
+        id="side-nav-{{ i }}"
+        href=""
+        (click)="onClick($event, i)"
+        [isActive]="i == selectedNavIndex"
+        lgSideBarNavLink
+      >
+        <lg-side-nav-bar-item>
+          <lg-side-nav-bar-item-heading>{{ item.title }}</lg-side-nav-bar-item-heading>
+          @if (item.description) {
+            <lg-side-nav-bar-item-content>{{
+              item.description
+            }}</lg-side-nav-bar-item-content>
+          }
+        </lg-side-nav-bar-item>
+      </a>
+    }
     <lg-side-nav-bar-footer>
       <a
         lg-button
@@ -66,8 +68,6 @@ const template = `
     LgMarginDirective,
     RouterOutlet,
     LgButtonComponent,
-    NgFor,
-    NgIf,
   ],
 })
 export class StorySideNavComponent {
diff --git a/projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts b/projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts
index 2aa238a37..2ecee0075 100644
--- a/projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts
+++ b/projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts
@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
-import { NgIf } from '@angular/common';
 
 import { LgMarginDirective } from '../margin.directive';
 import { LgCardComponent, LgCardContentComponent } from '../../../card';
@@ -14,10 +13,7 @@ export default {
   tags: [ 'pending' ],
   decorators: [
     moduleMetadata({
-      imports: [ LgCardComponent, LgCardContentComponent, LgMarginDirective, NgIf ],
-    }),
-    moduleMetadata({
-      imports: [ LgMarginDirective, NgIf ],
+      imports: [ LgCardComponent, LgCardContentComponent, LgMarginDirective ],
     }),
   ],
   parameters: {
@@ -122,11 +118,21 @@ export const Margin = {
         [lgMarginLeft]="marginLeft !== 'undefined' ? marginLeft : null">
           <lg-card-content>
             <strong>Spacing variant</strong> applied using directive
-            <div *ngIf="margin"><code>margin: {{margin | json}}</code></div>
-            <div *ngIf="marginTop !== 'undefined'"><code>marginTop: {{marginTop | json}}</code></div>
-            <div *ngIf="marginRight !== 'undefined'"><code>marginRight: {{marginRight | json}}</code></div>
-            <div *ngIf="marginBottom !== 'undefined'"><code>marginBottom: {{marginBottom | json}}</code></div>
-            <div *ngIf="marginLeft !== 'undefined'"><code>marginLeft: {{marginLeft | json}}</code></div>
+            @if (margin) {
+              <div><code>margin: {{margin | json}}</code></div>
+            }
+            @if (marginTop !== 'undefined') {
+              <div><code>marginTop: {{marginTop | json}}</code></div>
+            }
+            @if (marginRight !== 'undefined') {
+              <div><code>marginRight: {{marginRight | json}}</code></div>
+            }
+            @if (marginBottom !== 'undefined') {
+              <div><code>marginBottom: {{marginBottom | json}}</code></div>
+            }
+            @if (marginLeft !== 'undefined') {
+              <div><code>marginLeft: {{marginLeft | json}}</code></div>
+            }
           </lg-card-content>
       </lg-card>
       <lg-card><lg-card-content>Card without directive applied</lg-card-content></lg-card>
diff --git a/projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts b/projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts
index cb8de82f7..c56580d6c 100644
--- a/projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts
+++ b/projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts
@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
-import { NgIf } from '@angular/common';
 
 import { LgPaddingDirective } from '../padding.directive';
 import { LgCardComponent, LgCardContentComponent } from '../../../card';
@@ -14,7 +13,7 @@ export default {
   tags: [ 'pending' ],
   decorators: [
     moduleMetadata({
-      imports: [ LgCardComponent, LgCardContentComponent, LgPaddingDirective, NgIf ],
+      imports: [ LgCardComponent, LgCardContentComponent, LgPaddingDirective ],
     }),
   ],
   parameters: {
@@ -119,11 +118,21 @@ export const Padding = {
         [lgPaddingLeft]="paddingLeft !== 'undefined' ? paddingLeft : null">
           <lg-card-content>
             <strong>Spacing variant</strong> applied using directive
-            <div *ngIf="padding"><code>padding: {{padding | json}}</code></div>
-            <div *ngIf="paddingTop !== 'undefined'"><code>paddingTop: {{paddingTop | json}}</code></div>
-            <div *ngIf="paddingRight !== 'undefined'"><code>paddingRight: {{paddingRight | json}}</code></div>
-            <div *ngIf="paddingBottom !== 'undefined'"><code>paddingBottom: {{paddingBottom | json}}</code></div>
-            <div *ngIf="paddingLeft !== 'undefined'"><code>paddingLeft: {{paddingLeft | json}}</code></div>
+            @if (padding) {
+              <div><code>padding: {{padding | json}}</code></div>
+            }
+            @if (paddingTop !== 'undefined') {
+              <div><code>paddingTop: {{paddingTop | json}}</code></div>
+            }
+            @if (paddingRight !== 'undefined') {
+              <div><code>paddingRight: {{paddingRight | json}}</code></div>
+            }
+            @if (paddingBottom !== 'undefined') {
+              <div><code>paddingBottom: {{paddingBottom | json}}</code></div>
+            }
+            @if (paddingLeft !== 'undefined') {
+              <div><code>paddingLeft: {{paddingLeft | json}}</code></div>
+            }
           </lg-card-content>
       </lg-card>
       <lg-card><lg-card-content>Card without directive applied</lg-card-content></lg-card>
diff --git a/projects/canopy/src/lib/spinner/docs/spinner.stories.ts b/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
index c18ad38e8..4c16bf229 100644
--- a/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
+++ b/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
@@ -91,7 +91,9 @@ export const StandardSpinner = {
       source: {
         code: `
           # Display a spinner while loading
-          <lg-spinner *ngIf="!loaded" [size]="size" [variant]="variant" [text]="text ? text : null"></lg-spinner>
+          @if (!loaded) {
+            <lg-spinner [size]="size" [variant]="variant" [text]="text ? text : null"></lg-spinner>
+          }
 
           # Tell screen reader to read a message when loading is finished
           <p [lgSrAlertMessage]="loaded">Loading complete</p>
diff --git a/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx b/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
index c25b68664..e147cdf88 100644
--- a/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
+++ b/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
@@ -29,7 +29,9 @@ This directive can be used together with the `LgSpinnerComponent` to show a spin
 
 ```html
 # Display a spinner while loading
-<lg-spinner *ngIf="!loaded"></lg-spinner>
+@if (!loaded) {
+  <lg-spinner></lg-spinner>
+}
 
 # Tell the screen reader to read a message when loading is finished
 <p [lgSrAlertMessage]="loaded">Loading complete</p>
diff --git a/projects/canopy/src/lib/table/docs/table.stories.ts b/projects/canopy/src/lib/table/docs/table.stories.ts
index 457b93324..c69a23281 100644
--- a/projects/canopy/src/lib/table/docs/table.stories.ts
+++ b/projects/canopy/src/lib/table/docs/table.stories.ts
@@ -1,6 +1,5 @@
-import { ChangeDetectorRef, Component, Input, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, Input } from '@angular/core';
 import { moduleMetadata } from '@storybook/angular';
-import { NgFor } from '@angular/common';
 
 import type { TableVariant } from '../table.interface';
 import { AlignmentOptions, TableColumnLayoutBreakpoints } from '../table.interface';
@@ -98,7 +97,7 @@ const expandableTableTemplate = `
     </thead>
 
     <tbody lg-table-body>
-    <ng-container *ngFor="let book of books; index as i">
+    @for (book of books; track $index; let i = $index) {
       <tr lg-table-row>
         <td lg-table-cell>
           <lg-table-row-toggle
@@ -119,7 +118,7 @@ const expandableTableTemplate = `
           </lg-table-expanded-detail>
         </td>
       </tr>
-    </ng-container>
+    }
     </tbody>
   </table>
 `;
@@ -446,7 +445,6 @@ export default {
         LgInputDirective,
         LgMarginDirective,
         LgSuffixDirective,
-        NgFor,
       ],
     }),
   ],
@@ -464,11 +462,13 @@ const standardTableTemplate = `
   </thead>
 
   <tbody lg-table-body>
-    <tr lg-table-row *ngFor="let book of books">
-      <td lg-table-cell [stack]="stack">{{ book.author }}</td>
-      <td lg-table-cell [stack]="stack">{{ book.title }}</td>
-      <td lg-table-cell [stack]="stack">{{ book.published }}</td>
-    </tr>
+    @for (book of books; track book.title) {
+      <tr lg-table-row>
+        <td lg-table-cell [stack]="stack">{{ book.author }}</td>
+        <td lg-table-cell [stack]="stack">{{ book.title }}</td>
+        <td lg-table-cell [stack]="stack">{{ book.published }}</td>
+      </tr>
+    }
   </tbody>
 </table>
 `;
@@ -546,15 +546,17 @@ const withInputTableTemplate = `
   </thead>
 
   <tbody lg-table-body>
-    <tr lg-table-row *ngFor="let book of books">
-      <td lg-table-cell>{{ book.author }}</td>
-      <td lg-table-cell>
-        <lg-input-field lgMarginBottom="none" showLabel="false">
-          <input lgInput size="2" />
-          <span lgSuffix>%</span>
-        </lg-input-field>
-      </td>
-    </tr>
+    @for (book of books; track book.author) {
+      <tr lg-table-row>
+        <td lg-table-cell>{{ book.author }}</td>
+        <td lg-table-cell>
+          <lg-input-field lgMarginBottom="none" showLabel="false">
+            <input lgInput size="2" />
+            <span lgSuffix>%</span>
+          </lg-input-field>
+        </td>
+      </tr>
+    }
   </tbody>
 </table>
 `;
diff --git a/projects/canopy/src/lib/table/table/table.component.spec.ts b/projects/canopy/src/lib/table/table/table.component.spec.ts
index 363b1d27a..765bada4a 100644
--- a/projects/canopy/src/lib/table/table/table.component.spec.ts
+++ b/projects/canopy/src/lib/table/table/table.component.spec.ts
@@ -1,8 +1,7 @@
 import { DebugElement } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MockRender, MockComponents, ngMocks } from 'ng-mocks';
-import { NgFor } from '@angular/common';
+import { MockComponents, MockRender, ngMocks } from 'ng-mocks';
 
 import { LgTableCellComponent } from '../table-cell/table-cell.component';
 import { LgTableHeadComponent } from '../table-head/table-head.component';
@@ -45,7 +44,6 @@ describe('TableComponent', () => {
         LgTableHeadCellComponent,
         LgTableCellComponent,
         LgTableRowToggleComponent,
-        NgFor,
         MockComponents(LgIconComponent, LgTableExpandedDetailComponent),
       ],
     }).compileComponents();
@@ -64,11 +62,13 @@ describe('TableComponent', () => {
       </thead>
 
       <tbody lg-table-body>
-        <tr lg-table-row *ngFor="let book of books">
-          <td lg-table-cell>{{book.author}}</td>
-          <td lg-table-cell>{{book.title}}</td>
-          <td lg-table-cell>{{book.published}}</td>
-        </tr>
+        @for (book of books; track book.title) {
+          <tr lg-table-row>
+            <td lg-table-cell>{{book.author}}</td>
+            <td lg-table-cell>{{book.title}}</td>
+            <td lg-table-cell>{{book.published}}</td>
+          </tr>
+        }
       </tbody>
     </table>
     `,
diff --git a/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts b/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
index 6c8b51371..5f5c74f0b 100644
--- a/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
+++ b/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
@@ -1,5 +1,4 @@
 import { moduleMetadata } from '@storybook/angular';
-import { NgFor } from '@angular/common';
 
 import { LgTabsComponent } from '../tabs.component';
 import { LgTabNavBarComponent } from '../tab-nav-bar/tab-nav-bar.component';
@@ -12,12 +11,7 @@ export default {
   component: LgTabsComponent,
   decorators: [
     moduleMetadata({
-      imports: [
-        LgTabNavBarComponent,
-        LgTabNavBarLinkDirective,
-        LgTabNavContentComponent,
-        NgFor,
-      ],
+      imports: [ LgTabNavBarComponent, LgTabNavBarLinkDirective, LgTabNavContentComponent ],
     }),
   ],
   argTypes: {
@@ -103,11 +97,13 @@ export default {
 function getTemplate(preventDefault?: boolean) {
   return `
 <lg-tab-nav-bar label="Tabbed navigation demo">
-  <a *ngFor="let tab of tabs; index as i" lgTabNavBarLink href="" (click)="${
+  @for (tab of tabs; track $index; let i = $index) {
+    <a lgTabNavBarLink href="" (click)="${
   preventDefault
     ? '$event.preventDefault();'
     : ''
 }onClick($event)" id="tabbed-nav-{{i}}" [isActive]="i === selectedTabNavIndex">{{tab}}</a>
+  }
 </lg-tab-nav-bar>
 
 <lg-tab-nav-content [selectedTabId]="'tabbed-nav-' + selectedTabNavIndex">
diff --git a/projects/canopy/src/lib/tabs/docs/tabs.stories.ts b/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
index 0589f9f59..0ea45cad3 100644
--- a/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
+++ b/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
@@ -103,12 +103,14 @@ const template = `
   [lgMarginBottom]="'none'"
   [lgMarginLeft]="'none'"
 >
-  <lg-tab-item *ngFor="let tab of tabs">
-    <lg-tab-item-heading>{{ tab.header }}</lg-tab-item-heading>
-    <lg-tab-item-content>
-      <div class="lg-tabs__content-section">{{ tab.content }}</div>
-    </lg-tab-item-content>
-  </lg-tab-item>
+  @for (tab of tabs; track tab.header) {
+    <lg-tab-item>
+      <lg-tab-item-heading>{{ tab.header }}</lg-tab-item-heading>
+      <lg-tab-item-content>
+        <div class="lg-tabs__content-section">{{ tab.content }}</div>
+      </lg-tab-item-content>
+    </lg-tab-item>
+  }
 </lg-tabs>
 `;
 

From 20dbe53d209c7968fc2a3cdfe5e3c78352d98d59 Mon Sep 17 00:00:00 2001
From: elenagarrone <8397116+elenagarrone@users.noreply.github.com>
Date: Thu, 11 Dec 2025 09:08:28 +0000
Subject: [PATCH 2/3] fix(date-field): update to remove placeholder

BREAKING CHANGE: the placeholder has been removed as it was causing a11y issues.
We have added the hint component instead.
This is added automatically to the codebase.
Any existing hints used within the date field
will not appear anymore.
---
 .../src/app/app.component.html                |   2 -
 .../lib/forms/date/date-field.component.html  |   5 +-
 .../forms/date/date-field.component.spec.ts   | 242 +++++++++++++++++-
 .../lib/forms/date/date-field.component.ts    |  46 ++--
 .../lib/forms/date/docs/date-field.stories.ts |  12 +-
 .../canopy/src/lib/forms/date/docs/guide.mdx  | 101 ++++----
 .../lib/forms/validation/docs/form.stories.ts |   1 -
 7 files changed, 322 insertions(+), 87 deletions(-)

diff --git a/projects/canopy-test-app/src/app/app.component.html b/projects/canopy-test-app/src/app/app.component.html
index d35ebebda..778245a17 100644
--- a/projects/canopy-test-app/src/app/app.component.html
+++ b/projects/canopy-test-app/src/app/app.component.html
@@ -403,7 +403,6 @@ <h3>Carousel item 3</h3>
                     <lg-filter-container-panel-body>
                       <lg-date-field>
                         Date of birth
-                        <lg-hint>e.g. 05 12 1980</lg-hint>
                       </lg-date-field>
 
                       <lg-checkbox-group>
@@ -505,7 +504,6 @@ <h3>Carousel item 3</h3>
 
                   <lg-date-field formControlName="date">
                     Date of birth
-                    <lg-hint>e.g. 05 12 1980</lg-hint>
                   </lg-date-field>
 
                   <lg-checkbox-group formControlName="colors" lgMarginBottom="none">
diff --git a/projects/canopy/src/lib/forms/date/date-field.component.html b/projects/canopy/src/lib/forms/date/date-field.component.html
index 97fcd63c2..0ea3199f6 100644
--- a/projects/canopy/src/lib/forms/date/date-field.component.html
+++ b/projects/canopy/src/lib/forms/date/date-field.component.html
@@ -6,7 +6,7 @@
   <legend lg-label>
     <ng-content />
   </legend>
-  <ng-content select="lg-hint" />
+  <lg-hint>For example, 27 12 1977</lg-hint>
   <div
     class="lg-date-field__fields"
     [formGroup]="dateFormGroup"
@@ -22,7 +22,6 @@
           formControlName="date"
           inputmode="numeric"
           maxlength="2"
-          placeholder="DD"
           size="2"
           type="text"
         />
@@ -39,7 +38,6 @@
           formControlName="month"
           inputmode="numeric"
           maxlength="2"
-          placeholder="MM"
           size="3"
           type="text"
         />
@@ -56,7 +54,6 @@
           formControlName="year"
           inputmode="numeric"
           maxlength="4"
-          placeholder="YYYY"
           size="4"
           type="text"
         />
diff --git a/projects/canopy/src/lib/forms/date/date-field.component.spec.ts b/projects/canopy/src/lib/forms/date/date-field.component.spec.ts
index 75c63a7ae..79dc0acc4 100644
--- a/projects/canopy/src/lib/forms/date/date-field.component.spec.ts
+++ b/projects/canopy/src/lib/forms/date/date-field.component.spec.ts
@@ -27,13 +27,13 @@ import { LgDateFieldComponent } from './date-field.component';
 
 const errorId = 'test-error-id';
 const hintId = 'test-hint-id';
+const customAriaDescribedById = 'custom-aria-described-by-id';
 
 @Component({
   template: `
     <form (ngSubmit)="submit()" [formGroup]="form" #testForm="ngForm">
       <lg-date-field formControlName="dateOfBirth">
         Date of birth
-        <lg-hint id="${hintId}">Hint</lg-hint>
         <lg-validation id="${errorId}">Error</lg-validation>
       </lg-date-field>
     </form>
@@ -41,7 +41,6 @@ const hintId = 'test-hint-id';
   imports: [
     FormsModule,
     ReactiveFormsModule,
-    LgHintComponent,
     LgValidationComponent,
     LgDateFieldComponent,
   ],
@@ -78,6 +77,48 @@ class TestDateInputComponent {
       this.dateChange.emit(val);
     });
   }
+
+  submit() {
+    // Form submit handler
+  }
+}
+
+@Component({
+  template: `
+    <form (ngSubmit)="submit()" [formGroup]="form" #testForm="ngForm">
+      <p id="${customAriaDescribedById}">Additional description for accessibility</p>
+      <lg-date-field formControlName="dateOfBirth" [ariaDescribedBy]="customAriaId">
+        Date of birth
+        <lg-hint id="${hintId}">Hint</lg-hint>
+        <lg-validation id="${errorId}">Error</lg-validation>
+      </lg-date-field>
+    </form>
+  `,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    LgHintComponent,
+    LgValidationComponent,
+    LgDateFieldComponent,
+  ],
+})
+class TestDateInputWithCustomAriaComponent {
+  private fb = inject(UntypedFormBuilder);
+  customAriaId = customAriaDescribedById;
+  form: UntypedFormGroup;
+
+  @ViewChild('testForm')
+  testFormDirective: FormGroupDirective;
+
+  constructor() {
+    this.form = this.fb.group({
+      dateOfBirth: [ '' ],
+    });
+  }
+
+  submit() {
+    // Form submit handler
+  }
 }
 
 describe('LgDateFieldComponent', () => {
@@ -102,7 +143,8 @@ describe('LgDateFieldComponent', () => {
         ReactiveFormsModule,
         TestDateInputComponent,
         LgDateFieldComponent,
-        MockComponents(LgHintComponent, LgValidationComponent),
+        LgHintComponent,
+        MockComponents(LgValidationComponent),
       ],
       providers: [
         {
@@ -137,9 +179,11 @@ describe('LgDateFieldComponent', () => {
     });
 
     it('links the hint to the fieldset with the correct aria attributes', () => {
-      expect(fieldsetElement.nativeElement.getAttribute('aria-describedby')).toContain(
-        hintId,
-      );
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      // The hardcoded hint gets an auto-generated ID like 'lg-hint-1'
+      expect(ariaDescribedBy).toMatch(/lg-hint-\d+/);
     });
 
     it('links custom error messages to the input field with the correct aria attributes', () => {
@@ -149,10 +193,111 @@ describe('LgDateFieldComponent', () => {
     });
 
     it('combines both the hint and error ids to create the aria described attribute', () => {
-      expect(fieldsetElement.nativeElement.getAttribute('aria-describedby')).toBe(
-        `${hintId} ${errorId}`,
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      // Should match pattern: 'lg-hint-{number} test-error-id'
+      expect(ariaDescribedBy).toMatch(/^lg-hint-\d+ test-error-id$/);
+    });
+  });
+
+  describe('custom ariaDescribedBy', () => {
+    it('should preserve custom ariaDescribedBy value when provided via @Input', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy).toContain(customId);
+    });
+
+    it('should merge custom ariaDescribedBy with hint ID', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy).toContain(customId);
+      expect(ariaDescribedBy).toMatch(/lg-hint-\d+/);
+    });
+
+    it('should merge custom ariaDescribedBy with error ID', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy).toContain(customId);
+      expect(ariaDescribedBy).toContain(errorId);
+    });
+
+    it('should merge custom ariaDescribedBy with both hint and error IDs', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      // Should match pattern: 'custom-description-id lg-hint-{number} test-error-id'
+      expect(ariaDescribedBy).toMatch(
+        new RegExp(`^${customId} lg-hint-\\d+ ${errorId}$`),
       );
     });
+
+    it('should place custom ariaDescribedBy first in the merged list', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy.split(' ')[0]).toBe(customId);
+    });
+
+    it('should handle multiple space-separated custom IDs', () => {
+      const customIds = 'custom-id-1 custom-id-2';
+
+      dateFieldInstance.ariaDescribedBy = customIds;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy).toContain(customIds);
+      expect(ariaDescribedBy).toMatch(/lg-hint-\d+/);
+      expect(ariaDescribedBy).toContain(errorId);
+    });
+
+    it('should not add custom ariaDescribedBy if not provided', () => {
+      dateFieldInstance.ariaDescribedBy = null;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      // Should only have hint and error IDs
+      expect(ariaDescribedBy).toMatch(/^lg-hint-\d+ test-error-id$/);
+    });
   });
 
   it('adds the tabindex attribute to the fieldset element', () => {
@@ -398,3 +543,84 @@ describe('LgDateFieldComponent', () => {
     });
   });
 });
+
+describe('LgDateFieldComponent with custom ariaDescribedBy', () => {
+  let fixture: ComponentFixture<TestDateInputWithCustomAriaComponent>;
+  let fieldsetElement: DebugElement;
+  let component: TestDateInputWithCustomAriaComponent;
+  let errorStateMatcherMock: LgErrorStateMatcher;
+
+  beforeEach(waitForAsync(() => {
+    errorStateMatcherMock = {
+      isControlInvalid: jest.fn().mockReturnValue(false),
+    } as unknown as LgErrorStateMatcher;
+
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        TestDateInputWithCustomAriaComponent,
+        LgDateFieldComponent,
+        LgHintComponent,
+        MockComponents(LgValidationComponent),
+      ],
+      providers: [
+        {
+          provide: LgErrorStateMatcher,
+          useValue: errorStateMatcherMock,
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestDateInputWithCustomAriaComponent);
+    component = fixture.componentInstance;
+
+    fieldsetElement = fixture.debugElement.query(By.css('fieldset'));
+  }));
+
+  it('should create component with custom ariaDescribedBy', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should include custom ariaDescribedBy ID in the aria-describedby attribute', () => {
+    fixture.detectChanges();
+
+    const ariaDescribedBy =
+      fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+    expect(ariaDescribedBy).toContain(customAriaDescribedById);
+  });
+
+  it('should merge custom ariaDescribedBy with hint and error IDs', () => {
+    fixture.detectChanges();
+
+    const ariaDescribedBy =
+      fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+    expect(ariaDescribedBy).toContain(customAriaDescribedById);
+    expect(ariaDescribedBy).toMatch(/lg-hint-\d+/);
+    expect(ariaDescribedBy).toContain(errorId);
+  });
+
+  it('should place custom ariaDescribedBy first in the list', () => {
+    fixture.detectChanges();
+
+    const ariaDescribedBy =
+      fieldsetElement.nativeElement.getAttribute('aria-describedby');
+    const ids = ariaDescribedBy.split(' ');
+
+    expect(ids[0]).toBe(customAriaDescribedById);
+  });
+
+  it('should maintain all IDs in correct order: custom, hint, error', () => {
+    fixture.detectChanges();
+
+    const ariaDescribedBy =
+      fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+    // Should match pattern: 'custom-aria-described-by-id lg-hint-{number} test-error-id'
+    expect(ariaDescribedBy).toMatch(
+      new RegExp(`^${customAriaDescribedById} lg-hint-\\d+ ${errorId}$`),
+    );
+  });
+});
diff --git a/projects/canopy/src/lib/forms/date/date-field.component.ts b/projects/canopy/src/lib/forms/date/date-field.component.ts
index 34329b6d4..68a5d7e4e 100644
--- a/projects/canopy/src/lib/forms/date/date-field.component.ts
+++ b/projects/canopy/src/lib/forms/date/date-field.component.ts
@@ -1,4 +1,6 @@
 import {
+  AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ContentChild,
   HostBinding,
@@ -23,7 +25,6 @@ import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { isValid, parseISO } from 'date-fns';
 
-import { LgDomService } from '../../utils';
 import { LgHintComponent } from '../hint';
 import { LgErrorStateMatcher } from '../validation';
 import { LgValidationComponent } from '../validation';
@@ -56,16 +57,18 @@ const labelFieldMap = {
     LgInputFieldComponent,
     LgMarginDirective,
     LgInputDirective,
+    LgHintComponent,
   ],
 })
-export class LgDateFieldComponent implements OnInit, ControlValueAccessor, OnDestroy {
-  private domService = inject(LgDomService);
+export class LgDateFieldComponent
+implements OnInit, AfterViewInit, ControlValueAccessor, OnDestroy {
   private errorState = inject(LgErrorStateMatcher);
   private ngControl = inject(NgControl, { self: true, optional: true });
   private parentFormGroupDirective = inject(FormGroupDirective, {
     optional: true,
     skipSelf: true,
   });
+  private cdr = inject(ChangeDetectorRef);
 
   private uniqueId = nextUniqueId++;
   dateFormGroup: UntypedFormGroup;
@@ -86,25 +89,13 @@ export class LgDateFieldComponent implements OnInit, ControlValueAccessor, OnDes
 
   @HostBinding('class.lg-date-field') class = true;
 
-  @ContentChild(LgHintComponent)
+  @ViewChild(LgHintComponent)
   set hintElement(element: LgHintComponent) {
-    this.ariaDescribedBy = this.domService.toggleIdInStringProperty(
-      this.ariaDescribedBy,
-      this._hintElement,
-      element,
-    );
-
     this._hintElement = element;
   }
 
   @ContentChild(LgValidationComponent)
   set errorContentElement(element: LgValidationComponent) {
-    this.ariaDescribedBy = this.domService.toggleIdInStringProperty(
-      this.ariaDescribedBy,
-      this._validationElement,
-      element,
-    );
-
     this._validationElement = element;
   }
 
@@ -189,6 +180,29 @@ export class LgDateFieldComponent implements OnInit, ControlValueAccessor, OnDes
     );
   }
 
+  ngAfterViewInit(): void {
+    const ids: Array<string> = [];
+
+    // Preserve any custom ariaDescribedBy value provided via @Input
+    if (this.ariaDescribedBy) {
+      ids.push(this.ariaDescribedBy);
+    }
+
+    if (this._hintElement?.id) {
+      ids.push(this._hintElement.id);
+    }
+
+    if (this._validationElement?.id) {
+      ids.push(this._validationElement.id);
+    }
+
+    this.ariaDescribedBy = ids.length
+      ? ids.join(' ')
+      : null;
+
+    this.cdr.detectChanges();
+  }
+
   isControlInvalid(control: NgControl, form: FormGroupDirective): boolean {
     return this.errorState.isControlInvalid(control, form);
   }
diff --git a/projects/canopy/src/lib/forms/date/docs/date-field.stories.ts b/projects/canopy/src/lib/forms/date/docs/date-field.stories.ts
index b0047bdc8..7f5ca8e7b 100644
--- a/projects/canopy/src/lib/forms/date/docs/date-field.stories.ts
+++ b/projects/canopy/src/lib/forms/date/docs/date-field.stories.ts
@@ -7,24 +7,21 @@ import {
 import { moduleMetadata } from '@storybook/angular';
 
 import { LgDateFieldComponent } from '../date-field.component';
-import { LgHintComponent } from '../../hint';
 
 const template = `
 <lg-date-field [focus]="focus" formControlName="date">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
 </lg-date-field>
 `;
 
 @Component({
   selector: 'lg-reactive-form',
   template: ` <form [formGroup]="form">${template}</form> `,
-  imports: [ ReactiveFormsModule, LgDateFieldComponent, LgHintComponent ],
+  imports: [ ReactiveFormsModule, LgDateFieldComponent ],
 })
 class ReactiveFormComponent {
   fb = inject(UntypedFormBuilder);
 
-  @Input() hint: string;
   @Input() label: string;
   @Input() focus: boolean;
 
@@ -156,6 +153,11 @@ export default {
         disable: true,
       },
     },
+    ngAfterViewInit: {
+      table: {
+        disable: true,
+      },
+    },
     onBlur: {
       table: {
         disable: true,
@@ -227,7 +229,6 @@ export const DateInput = {
       <lg-reactive-form
         (inputChange)="inputChange($event)"
         [disabled]="disabled"
-        [hint]="hint"
         [label]="label"
         [focus]="focus"
       ></lg-reactive-form>
@@ -236,7 +237,6 @@ export const DateInput = {
   args: {
     disabled: false,
     label: 'Date of birth',
-    hint: 'For example, 12 06 1983',
     focus: false,
   },
   parameters: {
diff --git a/projects/canopy/src/lib/forms/date/docs/guide.mdx b/projects/canopy/src/lib/forms/date/docs/guide.mdx
index 723a1a9c7..eca55df9d 100644
--- a/projects/canopy/src/lib/forms/date/docs/guide.mdx
+++ b/projects/canopy/src/lib/forms/date/docs/guide.mdx
@@ -16,10 +16,7 @@ The output is a concatenation of individual string values into a valid ISO 8601
 Import the date input component into your application:
 
 ```js
-@NgModule({
-  ...
   imports: [ ..., LgDateFieldComponent ],
-});
 ```
 
 and in your HTML:
@@ -28,32 +25,33 @@ and in your HTML:
 <form [formGroup]="form" (ngSubmit)="..." #validationForm="ngForm">
   <lg-date-field formControlName="date">
     Date of birth
-    <lg-hint>For example, 12 06 1983</lg-hint>
-    <lg-validation *ngIf="isControlInvalid(date, validationForm)">
-      <ng-container *ngIf="date.hasError('invalidField')">
-        Enter a valid {{ date.errors.invalidField }}
-      </ng-container>
-      <ng-container *ngIf="date.hasError('invalidFields')">
-        Enter a valid {{ date.errors.invalidFields[0] }} and
-        {{ date.errors.invalidFields[1] }}
-      </ng-container>
-      <ng-container *ngIf="date.hasError('requiredField')">
-        Date of birth must include a {{ date.errors.requiredField }}
-      </ng-container>
-      <ng-container *ngIf="date.hasError('requiredFields')">
-        Date of birth must include a {{ date.errors.requiredFields[0] }} and
-        {{ date.errors.requiredFields[1] }}
-      </ng-container>
-      <ng-container *ngIf="date.hasError('invalidDate')">
-        Enter a valid date of birth
-      </ng-container>
-      <ng-container *ngIf="date.hasError('futureDate')">
-        Date must be in the past
-      </ng-container>
-      <ng-container *ngIf="date.hasError('required')">
-        Enter a date of birth
-      </ng-container>
-    </lg-validation>
+    @if (isControlInvalid(date, validationForm)) {
+      <lg-validation>
+        @if (date.hasError('invalidField')) {
+          Enter a valid {{ date.errors.invalidField }}
+        }
+        @if (date.hasError('invalidFields')) {
+          Enter a valid {{ date.errors.invalidFields[0] }} and
+          {{ date.errors.invalidFields[1] }}
+        }
+        @if (date.hasError('requiredField')) {
+          Date of birth must include a {{ date.errors.requiredField }}
+        }
+        @if (date.hasError('requiredFields')) {
+          Date of birth must include a {{ date.errors.requiredFields[0] }} and
+          {{ date.errors.requiredFields[1] }}
+        }
+        @if (date.hasError('invalidDate')) {
+          Enter a valid date of birth
+        }
+        @if (date.hasError('futureDate')) {
+          Date must be in the past
+        }
+        @if (date.hasError('required')) {
+          Enter a date of birth
+        }
+      </lg-validation>
+    }
   </lg-date-field>
 
   <button type="submit">Submit</button>
@@ -103,22 +101,24 @@ const form = new FormGroup({
 <!-- child component -->
 <ng-container formGroupName="childFormGroup">
   <lg-date-field formControlName="date">
-      <ng-container *ngIf="date.hasError('required')">
+      @if (date.hasError('required')) {
         Enter a date of birth
-      </ng-container>
+      }
   </lg-date-field>
 </ng-container>
 ```
 
 ### LgDateFieldComponent inputs
 
-| Name              | Description                                                                                                                       |   Type    |              Default               | Required |
-|-------------------|-----------------------------------------------------------------------------------------------------------------------------------|:---------:|:----------------------------------:|:--------:|
-| `dateId`          | HTML ID attribute for the date input, auto generated if not provided                                                              | `string`  | `lg-input-date-${nextUniqueId++}`  |    No    |
-| `monthId`         | HTML ID attribute for the month input, auto generated if not provided                                                             | `string`  | `lg-input-month-${nextUniqueId++}` |    No    |
-| `yearId`          | HTML ID attribute for the year input, auto generated if not provided                                                              | `string`  | `lg-input-year-${nextUniqueId++}`  |    No    |
-| `ariaDescribedBy` | HTML ID for the corresponding element that describes the date field, if not provided it will use the hint field where appropriate | `string`  |               `null`               |    No    |
-| `focus`           | Set the focus on the fieldset                                                                                                     | `boolean` |               `null`               |    No    |
+| Name              | Description                                                                                                                                    |   Type    |              Default               | Required |
+|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:----------------------------------:|:--------:|
+| `dateId`          | HTML ID attribute for the date input, auto generated if not provided                                                                           | `string`  | `lg-input-date-${nextUniqueId++}`  |    No    |
+| `monthId`         | HTML ID attribute for the month input, auto generated if not provided                                                                          | `string`  | `lg-input-month-${nextUniqueId++}` |    No    |
+| `yearId`          | HTML ID attribute for the year input, auto generated if not provided                                                                           | `string`  | `lg-input-year-${nextUniqueId++}`  |    No    |
+| `ariaDescribedBy` | HTML ID for the corresponding element that describes the date field, it will always use the hint plus anything passed to the aria described by | `string`  |               `null`               |    No    |
+| `focus`           | Set the focus on the fieldset                                                                                                                  | `boolean` |               `null`               |    No    |
+
+Note that this component automatically adds an `lg-hint` component that cannot be modified.
 
 ## Validation
 
@@ -220,10 +220,11 @@ const date = new FormControl('', [notMondayValidator()])
 ```html
 <lg-date-field formControlName="date">
   Date of appointment
-  <lg-hint>For example, 12 06 1983</lg-hint>
-  <lg-validation *ngIf="isControlInvalid(date, validationForm) && date.hasError('notMonday')">
-    Date cannot be a Monday
-  </lg-validation>
+  @if (isControlInvalid(date, validationForm) && date.hasError('notMonday')) {
+    <lg-validation>
+      Date cannot be a Monday
+    </lg-validation>
+  }
  </lg-date-field>
 ```
 
@@ -244,9 +245,9 @@ const control = new FormControl('', {
 ```
 
 ```html
-<ng-container *ngIf="date.hasError('futureDate')">
+@if (date.hasError('futureDate')) {
   Date must be in the future
-</ng-container>
+}
 ```
 
 #### Past date validator
@@ -262,9 +263,9 @@ const control = new FormControl('', {
 ```
 
 ```html
-<ng-container *ngIf="date.hasError('pastDate')">
+@if (date.hasError('pastDate')) {
   Date must be in the past
-</ng-container>
+}
 ```
 
 #### Before date validator
@@ -282,9 +283,9 @@ const control = new FormControl('', {
 ```
 
 ```html
-<ng-container *ngIf="date.hasError('beforeDate')">
+@if (date.hasError('beforeDate')) {
   Date must be before {{ date.errors.beforeDate.required }}
-</ng-container>
+}
 ```
 
 #### After date validator
@@ -302,9 +303,9 @@ const control = new FormControl('', {
 ```
 
 ```html
-<ng-container *ngIf="date.hasError('afterDate')">
+@if (date.hasError('afterDate')) {
   Date must be after {{ date.errors.afterDate.required }}
-</ng-container>
+}
 ```
 
 ***
diff --git a/projects/canopy/src/lib/forms/validation/docs/form.stories.ts b/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
index e980d6f30..920845a97 100644
--- a/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
+++ b/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
@@ -211,7 +211,6 @@ class FormGroupChildComponent implements OnInit {
 
       <lg-date-field formControlName="date">
         Date of birth
-        <lg-hint>For example, 15 06 1983</lg-hint>
         @if (isControlInvalid(date, validationForm)) {
           <lg-validation>
             @if (date.hasError('invalidField')) {

From 7ef7de94629d2166b24b33e56c3fd6c529045a96 Mon Sep 17 00:00:00 2001
From: elenagarrone <8397116+elenagarrone@users.noreply.github.com>
Date: Thu, 11 Dec 2025 11:25:22 +0000
Subject: [PATCH 3/3] fix(sort-code): update to remove placeholder

BREAKING CHANGE: the placeholder has been removed as it was causing a11y issues.
You will need to manually add an `lg-hint` component as per the example in the docs.
---
 projects/canopy-test-app/src/app/app.component.html      | 2 +-
 projects/canopy/src/lib/forms/sort-code/docs/guide.mdx   | 7 +++----
 .../src/lib/forms/sort-code/docs/sort-code.stories.ts    | 9 ++++++---
 .../src/lib/forms/sort-code/sort-code.directive.spec.ts  | 6 ------
 .../src/lib/forms/sort-code/sort-code.directive.ts       | 1 -
 .../canopy/src/lib/forms/validation/docs/form.stories.ts | 2 +-
 6 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/projects/canopy-test-app/src/app/app.component.html b/projects/canopy-test-app/src/app/app.component.html
index 778245a17..205403ed8 100644
--- a/projects/canopy-test-app/src/app/app.component.html
+++ b/projects/canopy-test-app/src/app/app.component.html
@@ -554,7 +554,7 @@ <h3>Carousel item 3</h3>
 
                   <lg-input-field>
                     Sort Code
-                    <lg-hint>Must be 6 digits long</lg-hint>
+                    <lg-hint>Must be 6 digits long, for example 00-00-00</lg-hint>
                     <input lgInput lgSortCode formControlName="sortCode" />
                   </lg-input-field>
 
diff --git a/projects/canopy/src/lib/forms/sort-code/docs/guide.mdx b/projects/canopy/src/lib/forms/sort-code/docs/guide.mdx
index be7c0caf3..c0a967f76 100644
--- a/projects/canopy/src/lib/forms/sort-code/docs/guide.mdx
+++ b/projects/canopy/src/lib/forms/sort-code/docs/guide.mdx
@@ -16,10 +16,7 @@ import { CustomBadge } from 'storybook-addon-tag-badges';
 Import the sort code and the [text input component](./?path=/docs/components-forms-text-input-guide--docs) into your application:
 
 ```js
-@NgModule({
-  ...
-  imports: [ ..., LgSortCodeComponent, LgInputComponent ],
-});
+  imports: [ ..., LgSortCodeDirective, LgInputComponent, LgHintComponent ],
 ```
 
 and in your HTML:
@@ -28,6 +25,8 @@ and in your HTML:
 
 Both the `lgInput` and `lgSortCode` directives have to be present on the input element.
 
+The exact `lg-hint` should be copied as well to ensure the correct context is provided to the user.
+
 **We recommend using <a href="https://angular.io/guide/reactive-forms" target="_blank">Angular's reactive forms</a>.**
 
 ### Validators
diff --git a/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts b/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
index 057c59d03..d7f29a3ca 100644
--- a/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
+++ b/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
@@ -13,9 +13,7 @@ import { LgHintComponent } from '../../hint';
 const template = `
 <lg-input-field>
   {{ label }}
-  @if (hint) {
-    <lg-hint>{{ hint }}</lg-hint>
-  }
+  <lg-hint>Must be 6 digits long, for example 00-00-00</lg-hint>
   <input lgInput lgSortCode formControlName="sortCode" />
 </lg-input-field>
 `;
@@ -88,6 +86,11 @@ export default {
         disable: true,
       },
     },
+    inputmode: {
+      table: {
+        disable: true,
+      },
+    },
     required: {
       table: {
         disable: true,
diff --git a/projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts b/projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts
index 27727ece1..65fded53d 100644
--- a/projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts
+++ b/projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts
@@ -55,12 +55,6 @@ describe('LgSortCodeDirective', () => {
       inputDebugElement.injector.get<LgSortCodeDirective>(LgSortCodeDirective);
   }));
 
-  it('adds a placeholder', () => {
-    fixture.detectChanges();
-
-    expect(inputDebugElement.nativeElement.placeholder).toContain('00-00-00');
-  });
-
   it('adds a required attribute', () => {
     fixture.detectChanges();
 
diff --git a/projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts b/projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts
index ec05a0557..34b7dd586 100644
--- a/projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts
+++ b/projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts
@@ -8,7 +8,6 @@ import { NgControl, Validators } from '@angular/forms';
 export class LgSortCodeDirective implements OnInit {
   private ngControl = inject(NgControl);
 
-  @HostBinding('placeholder') placeholder = '00-00-00';
   @HostBinding('required') required = true;
   @HostBinding('attr.inputmode') inputmode = 'numeric';
   // 8 because we allow for the two dashes
diff --git a/projects/canopy/src/lib/forms/validation/docs/form.stories.ts b/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
index 920845a97..93c8af4ea 100644
--- a/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
+++ b/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
@@ -244,7 +244,7 @@ class FormGroupChildComponent implements OnInit {
 
       <lg-input-field>
         Sort Code
-        <lg-hint>Must be 6 digits long</lg-hint>
+        <lg-hint>Must be 6 digits long, for example 00-00-00</lg-hint>
         <input lgInput lgSortCode formControlName="sortCode" />
         @if (isControlInvalid(sortCode, validationForm)) {
           <lg-validation>