feat: migrate from Angular 20 to Angular 21

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-ui",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "engines": {
     "node": ">=20"
   },
@@ -27,42 +27,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~20.3.17",
-    "@angular/common": "~20.3.17",
-    "@angular/compiler": "~20.3.17",
-    "@angular/core": "~20.3.17",
-    "@angular/forms": "~20.3.17",
-    "@angular/platform-browser": "~20.3.17",
-    "@angular/platform-browser-dynamic": "~20.3.17",
-    "@angular/router": "~20.3.17",
+    "@angular/animations": "~21.2.0",
+    "@angular/common": "~21.2.0",
+    "@angular/compiler": "~21.2.0",
+    "@angular/core": "~21.2.0",
+    "@angular/forms": "~21.2.0",
+    "@angular/platform-browser": "~21.2.0",
+    "@angular/platform-browser-dynamic": "~21.2.0",
+    "@angular/router": "~21.2.0",
     "@villedemontreal/hochelaga": "^5.5.0",
     "rxjs": "~7.4.0",
     "tslib": "^2.7.0",
-    "zone.js": "~0.15.1"
+    "zone.js": "~0.16.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.3.18",
-    "@angular-eslint/builder": "^20.7.0",
-    "@angular-eslint/eslint-plugin": "^20.7.0",
-    "@angular-eslint/eslint-plugin-template": "^20.7.0",
-    "@angular-eslint/schematics": "^20.7.0",
-    "@angular-eslint/template-parser": "^20.7.0",
-    "@angular/cdk": "^20.2.14",
-    "@angular/cli": "~20.3.18",
-    "@angular/compiler-cli": "~20.3.17",
-    "@angular/elements": "^20.3.17",
+    "@angular-devkit/build-angular": "^21.2.0",
+    "@angular-eslint/builder": "^21.2.0",
+    "@angular-eslint/eslint-plugin": "^21.2.0",
+    "@angular-eslint/eslint-plugin-template": "^21.2.0",
+    "@angular-eslint/schematics": "^21.2.0",
+    "@angular-eslint/template-parser": "^21.2.0",
+    "@angular/cdk": "^21.2.0",
+    "@angular/cli": "~21.2.0",
+    "@angular/compiler-cli": "~21.2.0",
+    "@angular/elements": "^21.2.0",
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.18.6",
     "@commitlint/cli": "^17.4.2",
     "@compodoc/compodoc": "^1.1.21",
-    "@storybook/addon-a11y": "^9.1.16",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-links": "^9.1.16",
-    "@storybook/angular": "^9.1.16",
+    "@storybook/addon-a11y": "^10.2.15",
+    "@storybook/addon-docs": "^10.2.15",
+    "@storybook/addon-links": "^10.2.15",
+    "@storybook/angular": "^10.2.15",
     "@types/jasmine": "^4.3.1",
     "@types/node": "^18.13.0",
-    "@typescript-eslint/eslint-plugin": "8.33.1",
-    "@typescript-eslint/parser": "8.33.1",
+    "@typescript-eslint/eslint-plugin": "8.56.1",
+    "@typescript-eslint/parser": "8.56.1",
     "@webcomponents/custom-elements": "^1.5.1",
     "babel-loader": "^9.1.2",
     "chromatic": "9.0.0",
@@ -71,7 +71,7 @@
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-storybook": "^0.11.5",
+    "eslint-plugin-storybook": "^10.2.15",
     "husky": "^8.0.3",
     "jasmine-core": "^4.5.0",
     "karma": "^6.4.1",
@@ -80,13 +80,13 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "karma-viewport": "1.0.9",
-    "ng-packagr": "^20.3.2",
+    "ng-packagr": "^21.2.0",
     "prettier": "3.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "scss-bundle": "^3.1.2",
-    "storybook": "^9.1.16",
-    "typescript": "~5.8.3",
+    "storybook": "^10.2.15",
+    "typescript": "~5.9.3",
     "wait-on": "^7.0.1"
   },
   "workspaces": [

projects/angular-ui/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@villedemontreal/angular-ui",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "dependencies": {
     "tslib": "^2.7.0"
   },
   "peerDependencies": {
-    "@angular/cdk": ">=20.0.0 <21.0.0",
-    "@angular/common": ">=20.0.0 <21.0.0",
-    "@angular/core": ">=20.0.0 <21.0.0",
-    "@angular/forms": ">=20.0.0 <21.0.0"
+    "@angular/cdk": ">=21.0.0 <22.0.0",
+    "@angular/common": ">=21.0.0 <22.0.0",
+    "@angular/core": ">=21.0.0 <22.0.0",
+    "@angular/forms": ">=21.0.0 <22.0.0"
   }
 }

projects/angular-ui/src/lib/alert/alert.component.html

@@ -2,15 +2,16 @@
 <div class="bao-alert-content-container">
   <ng-content></ng-content>
 </div>
-<button
-  bao-button
-  *ngIf="dismissible"
-  type="utility"
-  level="tertiary"
-  data-dismiss="alert"
-  role="button"
-  [attr.aria-label]="dismissibleButtonAriaLabel"
-  (click)="onDismissClicked()"
->
-  <bao-icon svgIcon="icon-x"></bao-icon>
-</button>
+@if (dismissible) {
+  <button
+    bao-button
+    type="utility"
+    level="tertiary"
+    data-dismiss="alert"
+    [attr.aria-label]="dismissibleButtonAriaLabel"
+    (click)="onDismissClicked()"
+    (keypress)="onDismissClicked()"
+  >
+    <bao-icon svgIcon="icon-x"></bao-icon>
+  </button>
+}

projects/angular-ui/src/lib/avatar/avatar.component.spec.ts

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license information.
  */
 
-import { DebugElement } from '@angular/core';
+import { DebugElement, provideZoneChangeDetection } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -27,7 +27,8 @@ describe('BaoAvatarComponent', () => {
           BaoAvatarComponent,
           BaoAvatarContent,
           TestAvatarIconHostComponent
-        ]
+        ],
+        providers: [provideZoneChangeDetection()]
       }).compileComponents();
     });
 
@@ -62,7 +63,8 @@ describe('BaoAvatarComponent', () => {
           BaoAvatarComponent,
           BaoAvatarContent,
           TestAvatarTextHostComponent
-        ]
+        ],
+        providers: [provideZoneChangeDetection()]
       });
       return TestBed.compileComponents();
     });
@@ -114,7 +116,8 @@ describe('BaoAvatarComponent', () => {
           BaoAvatarComponent,
           BaoAvatarContent,
           TestAvatarImageHostComponent
-        ]
+        ],
+        providers: [provideZoneChangeDetection()]
       }).compileComponents();
     });
 

projects/angular-ui/src/lib/button/button.component.html

@@ -1,13 +1,15 @@
-<bao-icon
-  *ngIf="loading && !rightIcon"
-  class="loading-spinner"
-  svgIcon="icon-spinner"
-  [title]="loadingSpinnerAriaLabel"
-></bao-icon>
+@if (loading && !rightIcon) {
+  <bao-icon
+    class="loading-spinner"
+    svgIcon="icon-spinner"
+    [title]="loadingSpinnerAriaLabel"
+  ></bao-icon>
+}
 <ng-content></ng-content>
-<bao-icon
-  *ngIf="loading && rightIcon"
-  class="loading-spinner loading-spinner-right"
-  svgIcon="icon-spinner"
-  [title]="loadingSpinnerAriaLabel"
-></bao-icon>
+@if (loading && rightIcon) {
+  <bao-icon
+    class="loading-spinner loading-spinner-right"
+    svgIcon="icon-spinner"
+    [title]="loadingSpinnerAriaLabel"
+  ></bao-icon>
+}

projects/angular-ui/src/lib/button/button.component.spec.ts

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license information.
  */
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
+import { DebugElement, provideZoneChangeDetection } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { BaoButtonComponent } from './index';
 import {
@@ -25,7 +25,8 @@ describe('BaoButtonComponent', () => {
           BaoButtonComponent,
           TestButtonHostComponent,
           BaoIconComponent
-        ]
+        ],
+        providers: [provideZoneChangeDetection()]
       });
 
       return TestBed.compileComponents();
@@ -280,7 +281,8 @@ describe('BaoButtonComponent', () => {
           BaoButtonComponent,
           TestButtonWithIconHostComponent,
           BaoIconComponent
-        ]
+        ],
+        providers: [provideZoneChangeDetection()]
       });
 
       return TestBed.compileComponents();

projects/angular-ui/src/lib/button/button.component.ts

@@ -6,7 +6,6 @@
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
@@ -86,10 +85,7 @@ export class BaoButtonComponent implements AfterContentInit {
    */
   public rightIcon = false;
 
-  constructor(
-    private elementRef: ElementRef<HTMLElement>,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private elementRef: ElementRef<HTMLElement>) {}
 
   get nativeElement(): HTMLElement {
     return this.elementRef.nativeElement;
@@ -105,6 +101,5 @@ export class BaoButtonComponent implements AfterContentInit {
         !(c as HTMLElement).classList.contains(LOADING_SPINNER_CLASS)
     );
     this.rightIcon = iconIdex > textIndex;
-    this.cdr.detectChanges();
   }
 }

projects/angular-ui/src/lib/common-components/label-text/labelText.component.ts

@@ -9,7 +9,7 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
   standalone: false,
   selector: 'bao-label, [bao-label]',
   encapsulation: ViewEncapsulation.None,
-  template: '<ng-content></ng-content><span *ngIf="required">&nbsp;*</span>',
+  template: '<ng-content></ng-content>@if (required) {<span>&nbsp;*</span>}',
   styleUrls: ['./labelText.component.scss'],
   host: { class: 'bao-label' }
 })

projects/angular-ui/src/lib/dropdown-menu/dropdown-menu.component.spec.ts

@@ -5,7 +5,7 @@
  */
 
 import { OverlayModule } from '@angular/cdk/overlay';
-import { DebugElement } from '@angular/core';
+import { DebugElement, provideZoneChangeDetection } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
@@ -44,7 +44,8 @@ describe('BaoDropdownMenuComponent', () => {
           TestDropdownMenuHostComponent,
           BaoIconComponent
         ],
-        imports: [OverlayModule]
+        imports: [OverlayModule],
+        providers: [provideZoneChangeDetection()]
       });
       return TestBed.compileComponents();
     }));
@@ -128,7 +129,8 @@ describe('BaoDropdownMenuComponent', () => {
           TestButtonMenuHostComponent,
           BaoIconComponent
         ],
-        imports: [OverlayModule]
+        imports: [OverlayModule],
+        providers: [provideZoneChangeDetection()]
       });
       return TestBed.compileComponents();
     }));
@@ -170,7 +172,8 @@ describe('BaoDropdownMenuComponent', () => {
           BaoCheckboxComponent,
           BaoRadioButtonComponent
         ],
-        imports: [OverlayModule]
+        imports: [OverlayModule],
+        providers: [provideZoneChangeDetection()]
       });
       return TestBed.compileComponents();
     }));

projects/angular-ui/src/lib/dropdown-menu/dropdown-menu.component.ts

@@ -273,7 +273,7 @@ export class BaoDropdownMenuComponent implements AfterViewInit {
   }
   set isOpen(isOpen: boolean) {
     this._isOpen = isOpen;
-    this.cdr.detectChanges();
+    this.cdr.markForCheck();
     this.isOpenChange.emit(isOpen);
   }
   set activeItemIndex(index: number) {

projects/angular-ui/src/lib/file/file-input.component.html

@@ -30,17 +30,21 @@
     ><div #ref>
       <ng-content select="bao-file-dropzone-instructions"></ng-content></div
   ></ng-container>
-  <ng-container *ngIf="ref.childNodes.length === 0"
-    ><bao-file-dropzone-instructions>{{
+  @if (ref.childNodes.length === 0) {
+    <bao-file-dropzone-instructions>{{
       intl.defaultDropzoneInstructions
-    }}</bao-file-dropzone-instructions></ng-container
-  >
+    }}</bao-file-dropzone-instructions>
+  }
 </div>
-<bao-error *ngIf="isFileTooBig">
-  {{ intl.fileTooBigErrorMessage }}
-</bao-error>
-<bao-error *ngIf="isFileTypeInvalid">
-  {{ intl.invalidFileTypeErrorMessage }}
-</bao-error>
+@if (isFileTooBig) {
+  <bao-error>
+    {{ intl.fileTooBigErrorMessage }}
+  </bao-error>
+}
+@if (isFileTypeInvalid) {
+  <bao-error>
+    {{ intl.invalidFileTypeErrorMessage }}
+  </bao-error>
+}
 <ng-content select="bao-error"></ng-content>
 <ng-content></ng-content>

projects/angular-ui/src/lib/file/file-input.component.spec.ts

@@ -5,7 +5,7 @@
  */
 
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
+import { DebugElement, provideZoneChangeDetection } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { TestFileInputHostComponent } from './tests/file-input.hostcomponent.spec';
@@ -44,7 +44,7 @@ describe('BaoFileInputComponent', () => {
           TestFileInputHostComponent
         ],
         imports: [OverlayModule],
-        providers: [BaoFileIntl]
+        providers: [BaoFileIntl, provideZoneChangeDetection()]
       });
       return TestBed.compileComponents();
     }));
@@ -139,7 +139,10 @@ describe('BaoFileInputComponent', () => {
           TestFileInputHostComponent
         ],
         imports: [OverlayModule],
-        providers: [{ provide: BaoFileIntl, useClass: BaoFileIntlEnglish }]
+        providers: [
+          { provide: BaoFileIntl, useClass: BaoFileIntlEnglish },
+          provideZoneChangeDetection()
+        ]
       });
       return TestBed.compileComponents();
     }));