diff --git a/e2e/disease-compare.spec.ts b/e2e/disease-compare.spec.ts
index ad475949..899d1c3f 100644
--- a/e2e/disease-compare.spec.ts
+++ b/e2e/disease-compare.spec.ts
@@ -119,6 +119,9 @@ test.describe('a disease pathway, and its comparison with the normal one', () =>
     }
   });
 
+  // Well inside the slide, which the waits around it put at about 600ms.
+  const SAYS_AT_ONCE = 200;
+
   test('a second click while it slides out brings it back', async ({ page }) => {
     await open(page, DISEASE);
     await compareButton(page).click();
@@ -127,10 +130,13 @@ test.describe('a disease pathway, and its comparison with the normal one', () =>
     await expect(compareButton(page)).toHaveText(/Close comparison/);
     await compareButton(page).click();
     // At once -- not once the slide has finished -- it says what it will do.
-    expect(await compareButton(page).textContent()).toMatch(/Compare with normal/);
+    // "At once" is the next frame, not the instant the click returns: under
+    // load, change detection may not have run by then. SAYS_AT_ONCE is well
+    // inside the slide, so this still fails if the label waits for it.
+    await expect(compareButton(page)).toHaveText(/Compare with normal/, { timeout: SAYS_AT_ONCE });
     // And a click before the slide is over reverses it.
     await compareButton(page).click();
-    expect(await compareButton(page).textContent()).toMatch(/Close comparison/);
+    await expect(compareButton(page)).toHaveText(/Close comparison/, { timeout: SAYS_AT_ONCE });
     await page.waitForTimeout(800);
     await expect(handle(page)).toBeVisible();
     await expect.poll(() => layerStart(page)).toBeGreaterThan(200);
diff --git a/projects/pathway-browser/src/app/deltasignal/deltasignal-logic-graph.component.ts b/projects/pathway-browser/src/app/deltasignal/deltasignal-logic-graph.component.ts
index 5e2171b9..4f624b56 100644
--- a/projects/pathway-browser/src/app/deltasignal/deltasignal-logic-graph.component.ts
+++ b/projects/pathway-browser/src/app/deltasignal/deltasignal-logic-graph.component.ts
@@ -5,7 +5,6 @@ import {
   effect,
   ElementRef,
   inject,
-  NgZone,
   OnDestroy,
   signal,
   untracked,
@@ -31,7 +30,6 @@ const GRAPH_LIMIT = 40;
 })
 export class DeltaSignalLogicGraphComponent implements OnDestroy {
   private readonly service = inject(DeltaSignalService);
-  private readonly zone = inject(NgZone);
   private readonly container = viewChild<ElementRef<HTMLDivElement>>('graphContainer');
   private cy?: Core;
   private observedElement?: HTMLDivElement;
@@ -116,7 +114,8 @@ export class DeltaSignalLogicGraphComponent implements OnDestroy {
     });
     this.cy.on('tap', 'node', (event) => {
       const selected = nodes.find((node) => node.uuid === event.target.id()) ?? null;
-      this.zone.run(() => this.selected.set(selected));
+      // A signal: zoneless change detection sees the set, with no zone to enter.
+      this.selected.set(selected);
     });
     this.cy
       .layout({
diff --git a/projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.html b/projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.html
index 3c025baf..8a7d0904 100644
--- a/projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.html
+++ b/projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.html
@@ -6,7 +6,7 @@
         <div class="label-container">{{ property.label || '' | titlecase }}</div>
         <div
           class="composition-container"
-          [ngClass]="{ 'columns-container': isArray(property.value) && !isString(property.value[0]) }"
+          [class.columns-container]="isArray(property.value) && !isString(property.value[0])"
         >
           @if (isArray(property.value) && !isString(property.value[0])) {
             @for (item of property.value; track item.dbId) {
diff --git a/projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.ts b/projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.ts
index c5a3d951..eab8293f 100644
--- a/projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.ts
+++ b/projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.ts
@@ -2,7 +2,7 @@ import { Component, computed, input, inject } from '@angular/core';
 import { ReferenceEntity } from '../../../model/graph/reference-entity/reference-entity.model';
 import { EntityService } from '../../../services/entity.service';
 import { isArray, isString } from 'lodash';
-import { NgClass, TitleCasePipe } from '@angular/common';
+import { TitleCasePipe } from '@angular/common';
 import { StructureViewerComponent } from '../../tabs/molecule-tab/structure-viewer/structure-viewer.component';
 import { DatabaseIdentifier } from '../../../model/graph/database-identifier.model';
 import { MatIconButton } from '@angular/material/button';
@@ -17,15 +17,7 @@ import { MoleculeType } from '../../tabs/molecule-tab/molecule-tab.component';
   selector: 'cr-external-reference',
   templateUrl: './external-reference.component.html',
   styleUrl: './external-reference.component.scss',
-  imports: [
-    TitleCasePipe,
-    NgClass,
-    MatIcon,
-    MatIconButton,
-    MatTooltip,
-    NgClass,
-    StructureViewerComponent,
-  ],
+  imports: [TitleCasePipe, MatIcon, MatIconButton, MatTooltip, StructureViewerComponent],
 })
 export class ExternalReferenceComponent {
   private entity = inject(EntityService);
diff --git a/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.html b/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.html
index 326126a1..dd09ea3d 100644
--- a/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.html
+++ b/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.html
@@ -26,7 +26,7 @@
         @let connector = getAllConnectors(treeNodeRef._getSetSize(), node, index, treeNodeRef.level)[index];
         <div
           class="connector"
-          [ngClass]="connector?.type"
+          [class]="connector?.type"
           [attr.data-shape]="connector?.shape"
           [matTooltip]="connector?.type"
         ></div>
@@ -150,7 +150,7 @@
                     : { type: 'is', shape: 'L' };
                 <div
                   class="connector"
-                  [ngClass]="connector?.type"
+                  [class]="connector?.type"
                   [attr.data-shape]="connector?.shape"
                   [matTooltip]="connector?.type"
                 ></div>
diff --git a/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.ts b/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.ts
index bc316b8c..6c023f92 100644
--- a/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.ts
+++ b/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.ts
@@ -39,7 +39,6 @@ import { DataStateService } from '../../../services/data-state.service';
 import type { Relationship } from '../../../model/graph/relationship.model';
 import { cloneDeep, isArray } from 'lodash';
 import { UrlStateService } from '../../../services/url-state.service';
-import { NgClass } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
 import { ExtractCompartmentPipe } from '../../../pipes/extract-compartment.pipe';
@@ -59,7 +58,6 @@ type Connector = { type: string; shape: 'L' | 'I' | 'T' } | null;
     ExpressionTagComponent,
     MatTree,
     MatNestedTreeNode,
-    NgClass,
     MatTooltip,
     MatIcon,
     MatTreeNodeOutlet,
diff --git a/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html b/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html
index c6e386d4..3a7c83b4 100644
--- a/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html
+++ b/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html
@@ -373,7 +373,7 @@ <h4 class="facet-group-title">Disease status</h4>
                 <a
                   [href]="`${CONTENT_SCHEMA}/Person/${author.dbId}`"
                   target="_blank"
-                  [ngClass]="{ 'margin-right': !author.orcidId }"
+                  [class.margin-right]="!author.orcidId"
                 >
                   {{ author.firstname }} {{ author.surname }}
                 </a>
diff --git a/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts b/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts
index ef300ac9..38774438 100644
--- a/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts
+++ b/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts
@@ -54,7 +54,7 @@ import { SpeciesService } from '../../../services/species.service';
 import { Summation } from '../../../model/graph/summation.model';
 import { FigureService } from './figure/figure.service';
 type HasModifiedResidue = Relationship.HasModifiedResidue;
-import { KeyValuePipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import { KeyValuePipe, NgTemplateOutlet } from '@angular/common';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { SortByTextPipe } from '../../../pipes/sort-by-text.pipe';
 import { IncludeRefPipe } from '../../../pipes/include-ref.pipe';
@@ -88,7 +88,6 @@ import type { Event as ReactomeEvent } from '../../../model/graph/event/event.mo
   standalone: true,
   imports: [
     NgTemplateOutlet,
-    NgClass,
     KeyValuePipe,
     RouterLink,
     SortByTextPipe,
diff --git a/projects/pathway-browser/src/app/diagram/diagram.component.ts b/projects/pathway-browser/src/app/diagram/diagram.component.ts
index bb4b5766..531eef6a 100644
--- a/projects/pathway-browser/src/app/diagram/diagram.component.ts
+++ b/projects/pathway-browser/src/app/diagram/diagram.component.ts
@@ -12,7 +12,6 @@ import {
   signal,
   viewChild,
   inject,
-  HostListener,
   untracked,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -81,6 +80,11 @@ const FIT_PADDING = 100;
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'cr-diagram',
+  host: {
+    '(window:pointermove)': 'onWindowPointerMove($event)',
+    '(window:pointerup)': 'endThumbnailDrag()',
+    '(window:pointercancel)': 'endThumbnailDrag()',
+  },
   templateUrl: './diagram.component.html',
   styleUrls: ['./diagram.component.scss'],
   standalone: true,
@@ -749,13 +753,10 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
     this.panFromThumbnail(event);
   }
 
-  @HostListener('window:pointermove', ['$event'])
   onWindowPointerMove(event: PointerEvent) {
     if (this.thumbnailDragging) this.panFromThumbnail(event);
   }
 
-  @HostListener('window:pointerup')
-  @HostListener('window:pointercancel')
   endThumbnailDrag() {
     this.thumbnailDragging = false;
   }
diff --git a/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts b/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts
index d0373aa5..cdc3ca9c 100644
--- a/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts
+++ b/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts
@@ -2,7 +2,6 @@ import { HttpClient } from '@angular/common/http';
 import {
   Component,
   ElementRef,
-  HostListener,
   computed,
   effect,
   inject,
@@ -135,6 +134,11 @@ const TYPE_ORDER: string[] = [
  */
 @Component({
   selector: 'cr-entity-popup',
+  host: {
+    '(document:keydown.escape)': 'onEscape()',
+    '(document:click)': 'onDocumentPointer($event)',
+    '(document:contextmenu)': 'onDocumentPointer($event)',
+  },
   standalone: true,
   imports: [MatIcon, MatTooltip, DecimalPipe],
   templateUrl: './entity-popup.component.html',
@@ -528,15 +532,12 @@ export class EntityPopupComponent {
     this.pinned.update((v) => !v);
   }
 
-  @HostListener('document:keydown.escape')
   onEscape(): void {
     if (this.target()) this.dismissed.emit();
   }
 
   // A right-click elsewhere fires `contextmenu` rather than `click`, so both
   // are needed to dismiss reliably.
-  @HostListener('document:click', ['$event'])
-  @HostListener('document:contextmenu', ['$event'])
   onDocumentPointer(event: Event): void {
     if (!this.target() || this.pinned()) return;
     if (this.host.nativeElement.contains(event.target as Node)) return;
diff --git a/projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.html b/projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.html
index cf38ea04..6eb8b978 100644
--- a/projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.html
+++ b/projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.html
@@ -53,7 +53,7 @@
         [crReveal]="node.stId === revealTarget()"
         class="leaf-node"
         (click)="$event.stopPropagation()"
-        [ngClass]="{ 'has-sibling': hasRootSiblingForLeafNode(node) }"
+        [class.has-sibling]="hasRootSiblingForLeafNode(node)"
         [attr.st-id]="node.stId"
       >
         <!-- The row, not the tree node: a node also contains its children. -->
@@ -66,7 +66,7 @@
             <button
               mat-button
               (click)="onTreeEventSelect(node)"
-              [ngClass]="{ selected: node.isSelected, hovered: node.isHovered, hit: node.hit }"
+              [class]="{ selected: node.isSelected, hovered: node.isHovered, hit: node.hit }"
               class="button"
             >
               <mat-icon
@@ -159,7 +159,7 @@
             <button
               mat-button
               class="button"
-              [ngClass]="{ selected: node.isSelected, hovered: node.isHovered, hit: node.hit }"
+              [class]="{ selected: node.isSelected, hovered: node.isHovered, hit: node.hit }"
             >
               <mat-icon
                 #eventIcon
diff --git a/projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.ts b/projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.ts
index 06c2aba5..5d443d3d 100644
--- a/projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.ts
+++ b/projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.ts
@@ -47,7 +47,7 @@ import { RouterLink } from '@angular/router';
 import { MatIcon } from '@angular/material/icon';
 import { MatNestedTreeNode } from '@angular/material/tree';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { NgClass } from '@angular/common';
+
 import { MatTooltip } from '@angular/material/tooltip';
 import { PassiveDirective } from '../utils/passive.directive';
 import { RevealDirective } from '../utils/reveal.directive';
@@ -68,7 +68,6 @@ import { HierarchyHoverService } from '../services/hierarchy-hover.service';
     MatTreeNodeOutlet,
     MatButton,
     MatIconButton,
-    NgClass,
     MatTooltip,
     PassiveDirective,
     RevealDirective,
diff --git a/projects/pathway-browser/src/app/interactors/interactors.component.html b/projects/pathway-browser/src/app/interactors/interactors.component.html
index ad6264d3..2d84a31b 100644
--- a/projects/pathway-browser/src/app/interactors/interactors.component.html
+++ b/projects/pathway-browser/src/app/interactors/interactors.component.html
@@ -19,9 +19,9 @@
           class="raised-full-width-button"
           [disabled]="hasEHLD()"
           (click)="clearInteractors()"
-          [ngClass]="{ 'active-button': clear }"
+          [class.active-button]="clear"
         >
-          <mat-icon [ngClass]="{ 'active-icon': clear }" color="primary">clear</mat-icon>
+          <mat-icon [class.active-icon]="clear" color="primary">clear</mat-icon>
           Clear overlays
         </button>
       </div>
@@ -35,7 +35,7 @@
           mat-button
           [disabled]="hasEHLD()"
           (click)="getInteractors(INTACT_RESOURCE)"
-          [ngClass]="{ 'active-button': currentResource().type === ResourceType.STATIC }"
+          [class.active-button]="currentResource().type === ResourceType.STATIC"
         >
           <!--
             IntAct carries the same count as the others. It is the resource a
@@ -76,7 +76,7 @@
                 mat-button
                 [disabled]="hasEHLD() || (!!loadingResource && loadingResource !== resource.name)"
                 (click)="getInteractors(resource.name)"
-                [ngClass]="{ 'active-button': currentResource().name === resource.name }"
+                [class.active-button]="currentResource().name === resource.name"
               >
                 <div class="resource-name">
                   <span>{{ resource.name }}</span>
@@ -115,7 +115,7 @@
               [value]="resourceToken"
               [selected]="isSelected(resourceToken)"
               (click)="getInteractors(resourceToken)"
-              [ngClass]="{ 'active-button': currentResource().name === resourceToken.summary.name }"
+              [class.active-button]="currentResource().name === resourceToken.summary.name"
               class="full-width"
             >
               <div class="resource-name surface-variant">
diff --git a/projects/pathway-browser/src/app/interactors/interactors.component.ts b/projects/pathway-browser/src/app/interactors/interactors.component.ts
index be45ab6f..dc28d062 100644
--- a/projects/pathway-browser/src/app/interactors/interactors.component.ts
+++ b/projects/pathway-browser/src/app/interactors/interactors.component.ts
@@ -22,7 +22,7 @@ import { CustomInteractorDialogComponent } from './custom-interactor-dialog/cust
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { MatDivider } from '@angular/material/divider';
 import { MatGridList, MatGridTile } from '@angular/material/grid-list';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
@@ -40,7 +40,6 @@ import { DEFAULT_INTERACTOR_SCORE } from './interactor-threshold';
     MatButton,
     MatIconButton,
     MatIcon,
-    NgClass,
     NgTemplateOutlet,
     MatDivider,
     MatGridList,
diff --git a/projects/pathway-browser/src/app/services/managed-download.directive.ts b/projects/pathway-browser/src/app/services/managed-download.directive.ts
index d3b928af..28635e97 100644
--- a/projects/pathway-browser/src/app/services/managed-download.directive.ts
+++ b/projects/pathway-browser/src/app/services/managed-download.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, computed, inject, signal } from '@angular/core';
+import { Directive, ElementRef, computed, inject, signal } from '@angular/core';
 import {
   DownloadPhase,
   FileDownloadService,
@@ -28,6 +28,7 @@ import {
   selector: 'a[crManagedDownload]',
   exportAs: 'managedDownload',
   host: {
+    '(click)': 'onClick($event)',
     '[class.dl--busy]': 'busy()',
     '[class.dl--failed]': 'failed()',
     '[attr.data-download-state]': 'label()',
@@ -65,7 +66,6 @@ export class ManagedDownloadDirective {
     return null;
   });
 
-  @HostListener('click', ['$event'])
   onClick(event: MouseEvent) {
     // A modified click is the reader asking the browser to handle it.
     if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
diff --git a/projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.html b/projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.html
index 3c3d77d5..89bf546d 100644
--- a/projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.html
+++ b/projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.html
@@ -3,7 +3,7 @@
   [style.--sticky-offset-right.px]="scrollDimensions().right"
 >
   @for (side of visibility | keyvalue; track side.key) {
-    <div class="shadow" [ngClass]="side.key" [class.visible]="side.value"></div>
+    <div class="shadow" [class]="side.key" [class.visible]="side.value"></div>
   }
 </div>
 
diff --git a/projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.ts b/projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.ts
index ce161ed7..587dadad 100644
--- a/projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.ts
+++ b/projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.ts
@@ -9,14 +9,14 @@ import {
   inject,
 } from '@angular/core';
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import { KeyValuePipe, NgClass } from '@angular/common';
+import { KeyValuePipe } from '@angular/common';
 import { Subscription } from 'rxjs';
 
 export type Side = 'top' | 'bottom' | 'left' | 'right';
 
 @Component({
   selector: 'shadow-scroll',
-  imports: [CdkScrollable, KeyValuePipe, NgClass],
+  imports: [CdkScrollable, KeyValuePipe],
   templateUrl: './shadow-scroll.component.html',
   styleUrl: './shadow-scroll.component.scss',
 })
diff --git a/projects/pathway-browser/src/app/viewport/viewport.component.html b/projects/pathway-browser/src/app/viewport/viewport.component.html
index 585a5599..ca2c241d 100644
--- a/projects/pathway-browser/src/app/viewport/viewport.component.html
+++ b/projects/pathway-browser/src/app/viewport/viewport.component.html
@@ -48,7 +48,7 @@
             (keydown.enter)="toggleVisibility('species')"
             (keydown.space)="toggleVisibility('species'); $event.preventDefault()"
             (keydown.escape)="closePanels()"
-            [ngClass]="{ selected: visibility.species }"
+            [class.selected]="visibility.species"
           >
             <mat-icon class="custom-icon" svgIcon="species"></mat-icon>
             <div class="species-content">
@@ -70,7 +70,7 @@
               (keydown.enter)="toggleVisibility('interactor')"
               (keydown.space)="toggleVisibility('interactor'); $event.preventDefault()"
               (keydown.escape)="closePanels()"
-              [ngClass]="{ selected: visibility.interactor }"
+              [class.selected]="visibility.interactor"
             >
               <mat-icon class="custom-icon" svgIcon="overlay"></mat-icon>
               <div class="overlay-content">
diff --git a/projects/pathway-browser/src/app/viewport/viewport.component.ts b/projects/pathway-browser/src/app/viewport/viewport.component.ts
index 2f57e19d..487723ab 100644
--- a/projects/pathway-browser/src/app/viewport/viewport.component.ts
+++ b/projects/pathway-browser/src/app/viewport/viewport.component.ts
@@ -54,7 +54,7 @@ import {
 } from '@angular/material/snack-bar';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { NgClass } from '@angular/common';
+
 import { AnalysisFormComponent } from './analysis-form/analysis-form.component';
 import { FormsModule } from '@angular/forms';
 import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
@@ -77,7 +77,6 @@ const DROPDOWN_DURATION = 500;
     AngularSplitModule,
     SearchComponent,
     MatIcon,
-    NgClass,
     SpeciesComponent,
     InteractorsComponent,
     EventHierarchyComponent,
diff --git a/projects/reactome-gsa-form/src/lib/analysis-methods/method/method.component.html b/projects/reactome-gsa-form/src/lib/analysis-methods/method/method.component.html
index b2e06c82..2342d4a2 100644
--- a/projects/reactome-gsa-form/src/lib/analysis-methods/method/method.component.html
+++ b/projects/reactome-gsa-form/src/lib/analysis-methods/method/method.component.html
@@ -2,7 +2,7 @@
   *ngrxLet="{ method: method$, parameters: parameters$, selected: selected$ } as vm"
   (closed)="updateScroll()"
   (opened)="updateScroll()"
-  [ngClass]="{ chosen: vm.selected }"
+  [class.chosen]="vm.selected"
   [expanded]="vm.selected"
   hideToggle
   class="mat-elevation-z3"
diff --git a/projects/reactome-gsa-form/src/lib/analysis-methods/method/method.component.ts b/projects/reactome-gsa-form/src/lib/analysis-methods/method/method.component.ts
index 76ddda11..c21c5708 100644
--- a/projects/reactome-gsa-form/src/lib/analysis-methods/method/method.component.ts
+++ b/projects/reactome-gsa-form/src/lib/analysis-methods/method/method.component.ts
@@ -14,7 +14,7 @@ import {
   MatExpansionPanelTitle,
   MatExpansionPanelDescription,
 } from '@angular/material/expansion';
-import { NgClass } from '@angular/common';
+
 import { MethodParameterComponent } from '../../utilities/method-parameter/method-parameter.component';
 import { MatButton } from '@angular/material/button';
 
@@ -25,7 +25,6 @@ import { MatButton } from '@angular/material/button';
   imports: [
     LetDirective,
     MatExpansionPanel,
-    NgClass,
     MatExpansionPanelHeader,
     MatExpansionPanelTitle,
     MatExpansionPanelDescription,
diff --git a/projects/reactome-gsa-form/src/lib/dataset-form/datasets/annotate-dataset/annotate-dataset.component.html b/projects/reactome-gsa-form/src/lib/dataset-form/datasets/annotate-dataset/annotate-dataset.component.html
index 63fa3f1c..c962607b 100644
--- a/projects/reactome-gsa-form/src/lib/dataset-form/datasets/annotate-dataset/annotate-dataset.component.html
+++ b/projects/reactome-gsa-form/src/lib/dataset-form/datasets/annotate-dataset/annotate-dataset.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="annotateDataStep">
   <div class="flex-container horizontal justify-center">
     <div
-      [ngClass]="screenIsSmall ? 'width-hundred' : 'width-eighty'"
+      [class]="screenIsSmall ? 'width-hundred' : 'width-eighty'"
       class="flex-container vertical gap-one align-center"
     >
       <div
diff --git a/projects/reactome-gsa-form/src/lib/dataset-form/datasets/annotate-dataset/annotate-dataset.component.ts b/projects/reactome-gsa-form/src/lib/dataset-form/datasets/annotate-dataset/annotate-dataset.component.ts
index bfcdc81e..67a5f9fa 100644
--- a/projects/reactome-gsa-form/src/lib/dataset-form/datasets/annotate-dataset/annotate-dataset.component.ts
+++ b/projects/reactome-gsa-form/src/lib/dataset-form/datasets/annotate-dataset/annotate-dataset.component.ts
@@ -15,7 +15,7 @@ import { datasetFeature } from '../../../state/dataset/dataset.selector';
 import { datasetActions } from '../../../state/dataset/dataset.actions';
 import { isDefined } from '../../../utilities/utils';
 import { Settings, ReactomeTableModule } from 'reactome-table';
-import { NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { TourAnchorMatMenuDirective } from 'ngx-ui-tour-md-menu';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
@@ -27,7 +27,6 @@ import { MatInput } from '@angular/material/input';
   imports: [
     FormsModule,
     ReactiveFormsModule,
-    NgClass,
     TourAnchorMatMenuDirective,
     MatFormField,
     MatLabel,
diff --git a/projects/reactome-gsa-form/src/lib/dataset-form/datasets/select-dataset/dataset-types/external-data/external-data.component.html b/projects/reactome-gsa-form/src/lib/dataset-form/datasets/select-dataset/dataset-types/external-data/external-data.component.html
index 736923e3..ff22bb02 100644
--- a/projects/reactome-gsa-form/src/lib/dataset-form/datasets/select-dataset/dataset-types/external-data/external-data.component.html
+++ b/projects/reactome-gsa-form/src/lib/dataset-form/datasets/select-dataset/dataset-types/external-data/external-data.component.html
@@ -3,7 +3,7 @@
     <div
       tourAnchor="search"
       class="dataset-card-content no-hover contrast"
-      [ngClass]="{ 'hover-opponent': (isSelected$ | async) }"
+      [class.hover-opponent]="isSelected$ | async"
     >
       <p class="bold no-wrap">
         @if (source().id === 'search') {
@@ -15,7 +15,7 @@
       <gsa-search [datasetId]="datasetId()"></gsa-search>
     </div>
   } @else {
-    <div class="dataset-card-content" [ngClass]="{ 'hover-opponent': (isSelected$ | async) }">
+    <div class="dataset-card-content" [class.hover-opponent]="isSelected$ | async">
       <p class="bold no-wrap">
         {{ source().name }}
         @if (source().url) {
@@ -25,7 +25,7 @@
         }
       </p>
       <p>{{ source().description }}</p>
-      <div [ngClass]="{ visible: isSelected$ | async }" class="invisible">
+      <div [class.visible]="isSelected$ | async" class="invisible">
         <form>
           <div class="flex-container vertical gap-one align-center">
             @for (param of source().parameters; track param.name) {
diff --git a/projects/reactome-gsa-form/src/lib/dataset-form/datasets/select-dataset/dataset-types/external-data/external-data.component.ts b/projects/reactome-gsa-form/src/lib/dataset-form/datasets/select-dataset/dataset-types/external-data/external-data.component.ts
index a52a0349..351a2592 100644
--- a/projects/reactome-gsa-form/src/lib/dataset-form/datasets/select-dataset/dataset-types/external-data/external-data.component.ts
+++ b/projects/reactome-gsa-form/src/lib/dataset-form/datasets/select-dataset/dataset-types/external-data/external-data.component.ts
@@ -7,7 +7,7 @@ import { datasetSourceFeature } from '../../../../../state/dataset-source/datase
 import { datasetActions } from '../../../../../state/dataset/dataset.actions';
 import { Parameter } from '../../../../../model/parameter.model';
 import { TourAnchorMatMenuDirective } from 'ngx-ui-tour-md-menu';
-import { NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { SearchComponent } from './search/search.component';
 import { FormsModule } from '@angular/forms';
@@ -20,7 +20,6 @@ import { MatButton } from '@angular/material/button';
   styleUrls: ['./external-data.component.scss'],
   imports: [
     TourAnchorMatMenuDirective,
-    NgClass,
     MatIcon,
     SearchComponent,
     FormsModule,
diff --git a/projects/reactome-gsa-form/src/lib/gsa-form.component.html b/projects/reactome-gsa-form/src/lib/gsa-form.component.html
index 05908121..834f1d91 100644
--- a/projects/reactome-gsa-form/src/lib/gsa-form.component.html
+++ b/projects/reactome-gsa-form/src/lib/gsa-form.component.html
@@ -13,7 +13,7 @@
     } as vm"
     (selectionChange)="stepChange($event, vm)"
     class="flex-container"
-    [ngClass]="{ 'no-tour': !tour.on }"
+    [class.no-tour]="!tour.on"
     [animationDuration]="tour.on ? '0' : '500'"
   >
     <mat-step #setMethodStep [completed]="vm.methodSelected" class="flex-one" [editable]="editable">
@@ -75,7 +75,7 @@ <h1>Step 2: Add and annotate your datasets</h1>
                   <gsa-dataset-form
                     [datasetId]="id"
                     [method]="vm.method"
-                    [ngClass]="{ 'width-hundred': i === 0 }"
+                    [class.width-hundred]="i === 0"
                   ></gsa-dataset-form>
                 </div>
               }
diff --git a/projects/reactome-gsa-form/src/lib/utilities/method-parameter/method-parameter.component.html b/projects/reactome-gsa-form/src/lib/utilities/method-parameter/method-parameter.component.html
index 93eaf9c7..1753bd75 100644
--- a/projects/reactome-gsa-form/src/lib/utilities/method-parameter/method-parameter.component.html
+++ b/projects/reactome-gsa-form/src/lib/utilities/method-parameter/method-parameter.component.html
@@ -1,7 +1,7 @@
 <div
   *ngrxLet="screenIsSmall$ as screenIsSmall"
   class="grid-container"
-  [ngClass]="{ 'no-information': screenIsSmall || !infoTooltip() }"
+  [class.no-information]="screenIsSmall || !infoTooltip()"
 >
   <!--  'background-grey': index % 2 === 1-->
   @if (screenIsSmall || !infoTooltip()) {
diff --git a/projects/reactome-gsa-form/src/lib/utilities/method-parameter/method-parameter.component.ts b/projects/reactome-gsa-form/src/lib/utilities/method-parameter/method-parameter.component.ts
index 5ff0505b..af82e815 100644
--- a/projects/reactome-gsa-form/src/lib/utilities/method-parameter/method-parameter.component.ts
+++ b/projects/reactome-gsa-form/src/lib/utilities/method-parameter/method-parameter.component.ts
@@ -18,7 +18,7 @@ import { map, Observable } from 'rxjs';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { Parameter } from '../../model/parameter.model';
 import { LetDirective } from '@ngrx/component';
-import { NgClass } from '@angular/common';
+
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
 import { MatFormField, MatError } from '@angular/material/form-field';
@@ -33,7 +33,6 @@ import { MatInput } from '@angular/material/input';
   styleUrls: ['./method-parameter.component.scss'],
   imports: [
     LetDirective,
-    NgClass,
     MatTooltip,
     MatIcon,
     MatFormField,
diff --git a/projects/reactome-gsa-form/src/lib/utilities/scrollable/scrollable.component.html b/projects/reactome-gsa-form/src/lib/utilities/scrollable/scrollable.component.html
index 2f6b9b37..6b4a8284 100644
--- a/projects/reactome-gsa-form/src/lib/utilities/scrollable/scrollable.component.html
+++ b/projects/reactome-gsa-form/src/lib/utilities/scrollable/scrollable.component.html
@@ -2,7 +2,7 @@
   #scrollable
   (scroll)="scrolling()"
   cdkScrollable
-  [ngClass]="{
+  [class]="{
     'overflow-hide': tourVisible | async,
     'tour-active': tour.on,
     'small-screen': (height.medium$ | async) !== true,
@@ -10,7 +10,7 @@
   id="scroll-container-{{ name() }}"
   class="center-vertical width-hundred relative flex-container align-center justify-center scrollbar fill-height"
 >
-  <div class="flex-container vertical justify-center align-center width-98" [ngClass]="innerClasses()">
+  <div class="flex-container vertical justify-center align-center width-98" [class]="innerClasses()">
     @if (shadows.top()) {
       <div class="shadow shadow-top width-hundred"></div>
     }
diff --git a/projects/reactome-gsa-form/src/lib/utilities/scrollable/scrollable.component.ts b/projects/reactome-gsa-form/src/lib/utilities/scrollable/scrollable.component.ts
index 3f987bc3..1de95225 100644
--- a/projects/reactome-gsa-form/src/lib/utilities/scrollable/scrollable.component.ts
+++ b/projects/reactome-gsa-form/src/lib/utilities/scrollable/scrollable.component.ts
@@ -14,7 +14,7 @@ import { map } from 'rxjs';
 import { TourUtilsService } from '../../services/tour-utils.service';
 import { HeightService } from '../../services/height.service';
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import { NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 
 @UntilDestroy()
 @Component({
@@ -22,7 +22,7 @@ import { NgClass, AsyncPipe } from '@angular/common';
   templateUrl: './scrollable.component.html',
   styleUrls: ['./scrollable.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CdkScrollable, NgClass, AsyncPipe],
+  imports: [CdkScrollable, AsyncPipe],
 })
 export class ScrollableComponent implements AfterViewInit, OnDestroy {
   private scrollService = inject(ScrollService);
diff --git a/projects/reactome-table/src/lib/component/table/table.component.html b/projects/reactome-table/src/lib/component/table/table.component.html
index f48dbe61..b4568154 100644
--- a/projects/reactome-table/src/lib/component/table/table.component.html
+++ b/projects/reactome-table/src/lib/component/table/table.component.html
@@ -44,7 +44,7 @@
           [style.height.px]="start.height"
           [style.width.px]="start.width"
           [style.z-index]="inputLevel$ | async"
-          [ngClass]="startClasses$ | async"
+          [class]="startClasses$ | async"
           class="flying-rename"
         />
       }
@@ -123,7 +123,7 @@
               @if (y !== 0) {
                 @for (cell of row; track $index; let x = $index) {
                   @if (x === 0 && settings.showRows) {
-                    <th [attr.x]="x" [attr.y]="y" [ngClass]="{ selected: cell.selected }" class="border-right rows">
+                    <th [attr.x]="x" [attr.y]="y" [class.selected]="cell.selected" class="border-right rows">
                       <div class="flex horizontal align-center justify-between">
                         @if (settings.deleteRow) {
                           <button (click)="deleteRow(y)" class="bin-button" mat-icon-button>
@@ -135,7 +135,7 @@
                     </th>
                   }
                   @if (x !== 0) {
-                    <td [attr.x]="x" [attr.y]="y" class="cell" [ngClass]="{ selected: cell.selected }">
+                    <td [attr.x]="x" [attr.y]="y" class="cell" [class.selected]="cell.selected">
                       {{ cell.value }}
                     </td>
                   }
diff --git a/projects/website-angular/src/app/app.component.ts b/projects/website-angular/src/app/app.component.ts
index 4d7edbdc..4cc8d5ab 100644
--- a/projects/website-angular/src/app/app.component.ts
+++ b/projects/website-angular/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { ViewportScroller } from '@angular/common';
@@ -15,6 +15,9 @@ import { IS_CURATOR } from '../../../pathway-browser/src/environments/environmen
 
 @Component({
   selector: 'app-root',
+  host: {
+    '(document:click)': 'onDocumentClick($event)',
+  },
   standalone: true,
   imports: [
     RouterOutlet,
@@ -81,7 +84,6 @@ export class AppComponent implements OnInit {
 
   // Intercept hash-only anchor clicks so Angular's <base href="/"> doesn't
   // resolve them as navigations to /#anchor (which lands on the home page).
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
     const anchor = (event.target as Element | null)?.closest('a');
diff --git a/projects/website-angular/src/app/navigation-bar/navigation-bar.component.ts b/projects/website-angular/src/app/navigation-bar/navigation-bar.component.ts
index c8dfd087..5e0f443b 100644
--- a/projects/website-angular/src/app/navigation-bar/navigation-bar.component.ts
+++ b/projects/website-angular/src/app/navigation-bar/navigation-bar.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, inject, viewChild, AfterViewInit } from '@angular/core';
+import { Component, inject, viewChild, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
@@ -12,6 +12,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 @Component({
   standalone: true,
   selector: 'app-navigation-bar',
+  host: {
+    '(window:resize)': 'onResize($event)',
+  },
   imports: [
     CommonModule,
     RouterModule,
@@ -118,7 +121,7 @@ export class NavigationBarComponent implements AfterViewInit {
     return !!links && Object.keys(links).length > 0;
   }
 
-  @HostListener('window:resize', ['$event']) onResize(_event: any) {
+  onResize(_event: any) {
     this.windowWidth = window.innerWidth;
   }
 }
diff --git a/projects/website-angular/src/app/reactome-components/carousel/carousel.component.ts b/projects/website-angular/src/app/reactome-components/carousel/carousel.component.ts
index 0d35b5f3..a4c10a6a 100644
--- a/projects/website-angular/src/app/reactome-components/carousel/carousel.component.ts
+++ b/projects/website-angular/src/app/reactome-components/carousel/carousel.component.ts
@@ -2,7 +2,6 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
-  HostListener,
   OnDestroy,
   signal,
   input,
@@ -12,6 +11,9 @@ import { MatIcon } from '@angular/material/icon';
 
 @Component({
   selector: 'app-carousel',
+  host: {
+    '(window:resize)': 'onWindowResize()',
+  },
   imports: [MatIcon],
   templateUrl: './carousel.component.html',
   styleUrl: './carousel.component.scss',
@@ -32,7 +34,6 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
 
   private resizeObserver?: ResizeObserver;
 
-  @HostListener('window:resize')
   onWindowResize(): void {
     this.checkOverflow();
   }
diff --git a/projects/website-angular/src/app/scroll-to-top/scroll-to-top.component.ts b/projects/website-angular/src/app/scroll-to-top/scroll-to-top.component.ts
index ec067698..83f03c3e 100644
--- a/projects/website-angular/src/app/scroll-to-top/scroll-to-top.component.ts
+++ b/projects/website-angular/src/app/scroll-to-top/scroll-to-top.component.ts
@@ -1,8 +1,11 @@
-import { Component, HostListener, signal } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
   selector: 'app-scroll-to-top',
+  host: {
+    '(window:scroll)': 'onWindowScroll()',
+  },
   standalone: true,
   imports: [MatIcon],
   templateUrl: './scroll-to-top.component.html',
@@ -17,16 +20,15 @@ export class ScrollToTopComponent {
    * Whether the page is scrolled away from the top, which is what reveals the
    * button.
    *
-   * A signal rather than a plain field, and a HostListener rather than a bare
+   * A signal rather than a plain field, and a host listener rather than a bare
    * `window.addEventListener`, because both are needed without zone.js: a
    * listener registered directly on window is invisible to Angular, so the
    * assignment used to update nothing and the button never appeared. Angular
-   * also tears a HostListener down with the component, which the manual
+   * also tears a host listener down with the component, which the manual
    * listener never did.
    */
   readonly windowScrolled = signal(false);
 
-  @HostListener('window:scroll')
   onWindowScroll(): void {
     this.windowScrolled.set(window.scrollY !== 0);
   }
diff --git a/projects/website-angular/src/app/search/search-bar/search-bar.component.ts b/projects/website-angular/src/app/search/search-bar/search-bar.component.ts
index 4e408f39..ee7c6e4b 100644
--- a/projects/website-angular/src/app/search/search-bar/search-bar.component.ts
+++ b/projects/website-angular/src/app/search/search-bar/search-bar.component.ts
@@ -5,7 +5,6 @@ import {
   inject,
   OnChanges,
   SimpleChanges,
-  HostListener,
   signal,
   linkedSignal,
   ChangeDetectorRef,
@@ -34,6 +33,10 @@ const FILTER_KEYS = ['species', 'types', 'compartments', 'keywords', 'pageCatego
 
 @Component({
   selector: 'app-search-bar',
+  host: {
+    '(window:keydown.arrowdown)': 'onKeyDownArrowDown($event)',
+    '(window:keydown.arrowup)': 'onKeyDownArrowUp($event)',
+  },
   standalone: true,
   imports: [DropdownToggleComponent, RouterLink],
   templateUrl: './search-bar.component.html',
@@ -249,7 +252,6 @@ export class SearchBarComponent implements OnChanges, AfterViewInit, OnInit {
     this.advancedFilters[key] = current;
   }
 
-  @HostListener('window:keydown.arrowdown', ['$event'])
   onKeyDownArrowDown(event: Event): void {
     event.preventDefault();
     if (this.suggestions.length > 0 && this.showSuggestions()) {
@@ -258,7 +260,6 @@ export class SearchBarComponent implements OnChanges, AfterViewInit, OnInit {
     }
   }
 
-  @HostListener('window:keydown.arrowup', ['$event'])
   onKeyDownArrowUp(event: Event): void {
     event.preventDefault();
     if (this.suggestions.length > 0 && this.showSuggestions()) {