From 3b4cd80dcc650a4cae2a405b70328ca139d5a5c0 Mon Sep 17 00:00:00 2001 From: "Bajohr, Rayk" Date: Tue, 23 Jun 2026 07:31:54 +0200 Subject: [PATCH] refactor(navbar-vertical): explicitly define change detection strategy --- .../si-navbar-vertical-next-divider.component.ts | 5 +++-- ...si-navbar-vertical-next-group-trigger.directive.ts | 2 ++ .../si-navbar-vertical-next-group.component.ts | 3 ++- .../si-navbar-vertical-next-header.component.ts | 3 ++- .../si-navbar-vertical-next-item.component.spec.ts | 8 +++++--- .../si-navbar-vertical-next.spec.ts | 7 ++++--- .../si-navbar-vertical-divider.component.ts | 5 +++-- .../si-navbar-vertical-group-trigger.directive.ts | 2 ++ .../si-navbar-vertical-group.component.ts | 3 ++- .../si-navbar-vertical-header.component.ts | 3 ++- .../si-navbar-vertical-item-legacy.component.ts | 11 ++++++++++- .../si-navbar-vertical-item.component.spec.ts | 8 +++++--- .../navbar-vertical/si-navbar-vertical.component.ts | 2 ++ .../navbar-vertical/si-navbar-vertical.spec.ts | 7 ++++--- .../navbar/si-navbar-item/si-navbar-item.component.ts | 2 ++ .../si-navbar-primary/si-navbar-primary.component.ts | 4 +++- 16 files changed, 53 insertions(+), 22 deletions(-) diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-divider.component.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-divider.component.ts index 40cc63137b..7c28d55ffc 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-divider.component.ts +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-divider.component.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; /** * @experimental @@ -11,6 +11,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'si-navbar-vertical-next-divider', template: '', - styleUrl: './si-navbar-vertical-next-divider.component.scss' + styleUrl: './si-navbar-vertical-next-divider.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SiNavbarVerticalNextDividerComponent {} diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group-trigger.directive.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group-trigger.directive.ts index c2ffc29a55..0b9156f0c7 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group-trigger.directive.ts +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group-trigger.directive.ts @@ -9,6 +9,7 @@ import { } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; import { + ChangeDetectionStrategy, Component, ComponentRef, computed, @@ -39,6 +40,7 @@ import { SI_NAVBAR_VERTICAL_NEXT } from './si-navbar-vertical-next.provider'; @Component({ selector: 'si-navbar-flyout-anchor', template: '', + changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.aria-owns]': 'groupId()' } }) class SiNavbarFlyoutAnchorComponent { diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group.component.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group.component.ts index bc61342844..2df8c656fa 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group.component.ts +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-group.component.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CdkTrapFocus } from '@angular/cdk/a11y'; -import { Component, computed, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { RouterLinkActive } from '@angular/router'; @@ -29,6 +29,7 @@ import { SI_NAVBAR_VERTICAL_NEXT } from './si-navbar-vertical-next.provider'; }`, styleUrl: './si-navbar-vertical-next-group.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'group', '[id]': 'groupTrigger.groupId', diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-header.component.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-header.component.ts index 7239d1f636..81f407b2a7 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-header.component.ts +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-header.component.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { SiNavbarVerticalNextDividerComponent } from './si-navbar-vertical-next-divider.component'; import { SI_NAVBAR_VERTICAL_NEXT } from './si-navbar-vertical-next.provider'; @@ -21,6 +21,7 @@ import { SI_NAVBAR_VERTICAL_NEXT } from './si-navbar-vertical-next.provider'; } `, styleUrl: './si-navbar-vertical-next-header.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.collapsed]': 'navbar.collapsed()', 'animate.enter': 'component-enter' diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-item.component.spec.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-item.component.spec.ts index bdf65b4cb9..a041c96fd0 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-item.component.spec.ts +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-item.component.spec.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { Component, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { SiNavbarVerticalNextItemComponent } from './si-navbar-vertical-next-item.component'; @@ -18,7 +18,8 @@ import { SI_NAVBAR_VERTICAL_NEXT } from './si-navbar-vertical-next.provider'; [icon]="icon()" > Test Item - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) class TestHostComponent { readonly badge = signal(undefined); @@ -36,7 +37,8 @@ class TestHostComponent { [hideBadgeWhenCollapsed]="hideBadgeWhenCollapsed()" > Test Item - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) class TestHostWithBadgeVisibilityComponent { readonly badge = signal(undefined); diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.spec.ts b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.spec.ts index b6280df3ba..401e6f38c4 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.spec.ts +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.spec.ts @@ -5,7 +5,7 @@ import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; -import { Component, Injectable, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Injectable, signal } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { provideRouter, Router, RouterLink, RouterLinkActive } from '@angular/router'; import { @@ -49,7 +49,7 @@ class BreakpointObserverMock implements Partial { } } -@Component({ template: '' }) +@Component({ template: '', changeDetection: ChangeDetectionStrategy.OnPush }) class EmptyComponent {} @Component({ @@ -155,7 +155,8 @@ class EmptyComponent {} sub-item2 - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) class TestHostComponent { readonly textOnly = signal(true); diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-divider.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-divider.component.ts index be07d5eb4c..94eab1e6ce 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-divider.component.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-divider.component.ts @@ -2,12 +2,13 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; // We need a component to attach the stylesheet @Component({ selector: 'si-navbar-vertical-divider', template: '', - styleUrl: './si-navbar-vertical-divider.component.scss' + styleUrl: './si-navbar-vertical-divider.component.scss', + changeDetection: ChangeDetectionStrategy.Default }) export class SiNavbarVerticalDividerComponent {} diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts index 5bc92695a7..df22bc643d 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts @@ -5,6 +5,7 @@ import { Overlay } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; import { + ChangeDetectionStrategy, Component, ComponentRef, computed, @@ -34,6 +35,7 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider'; @Component({ selector: 'si-navbar-flyout-anchor', template: '', + changeDetection: ChangeDetectionStrategy.Default, host: { '[attr.aria-owns]': 'groupId()' } }) class SiNavbarFlyoutAnchorComponent { diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts index ecde20f942..892a8b8c43 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CdkTrapFocus } from '@angular/cdk/a11y'; -import { Component, computed, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { RouterLinkActive } from '@angular/router'; @@ -27,6 +27,7 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider'; }`, styleUrl: './si-navbar-vertical-group.component.scss', + changeDetection: ChangeDetectionStrategy.Default, host: { role: 'group', '[id]': 'groupTrigger.groupId', diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.ts index 9e0e329559..3e3355cf40 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { SiNavbarVerticalDividerComponent } from './si-navbar-vertical-divider.component'; import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider'; @@ -20,6 +20,7 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider'; } `, styleUrl: './si-navbar-vertical-header.component.scss', + changeDetection: ChangeDetectionStrategy.Default, host: { '[class.collapsed]': 'navbar.collapsed()', 'animate.enter': 'component-enter' diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item-legacy.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-item-legacy.component.ts index 4022cbd641..873befe365 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item-legacy.component.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item-legacy.component.ts @@ -2,7 +2,15 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { Component, computed, inject, input, model, viewChildren } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, + input, + model, + viewChildren +} from '@angular/core'; import { MenuItem } from '@siemens/element-ng/common'; import { SiLinkDirective } from '@siemens/element-ng/link'; import { SiTranslatePipe } from '@siemens/element-translate-ng/translate'; @@ -25,6 +33,7 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider'; ], templateUrl: './si-navbar-vertical-item-legacy.component.html', styleUrl: './si-navbar-vertical-item-legacy.component.scss', + changeDetection: ChangeDetectionStrategy.Default, host: { 'class': 'd-block mb-4' } diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts index d426954c0c..22fc483c9c 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { Component, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { SiNavbarVerticalItemComponent } from './si-navbar-vertical-item.component'; @@ -11,7 +11,8 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider'; @Component({ imports: [SiNavbarVerticalItemComponent], - template: ` Test Item ` + template: ` Test Item `, + changeDetection: ChangeDetectionStrategy.OnPush }) class TestHostComponent { readonly item = signal({ @@ -23,7 +24,8 @@ class TestHostComponent { @Component({ imports: [SiNavbarVerticalItemComponent], - template: ` Test Item ` + template: ` Test Item `, + changeDetection: ChangeDetectionStrategy.OnPush }) class TestHostWithBadgeVisibilityComponent { readonly item = signal({ diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts index 32ff01c063..fafb54b3af 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts @@ -7,6 +7,7 @@ import { NgTemplateOutlet } from '@angular/common'; import { afterNextRender, booleanAttribute, + ChangeDetectionStrategy, Component, computed, Directive, @@ -80,6 +81,7 @@ export class SiNavbarVerticalItemGuardDirective { templateUrl: './si-navbar-vertical.component.html', styleUrl: './si-navbar-vertical.component.scss', providers: [{ provide: SI_NAVBAR_VERTICAL, useExisting: SiNavbarVerticalComponent }], + changeDetection: ChangeDetectionStrategy.Default, host: { class: 'si-layout-inner', '[class.nav-collapsed]': 'collapsed()', diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.spec.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical.spec.ts index acacca18be..644d0fcb71 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical.spec.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.spec.ts @@ -5,7 +5,7 @@ import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; -import { Component, Injectable, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Injectable, signal } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { provideRouter, Router } from '@angular/router'; import { @@ -42,7 +42,7 @@ class BreakpointObserverMock implements Partial { } } -@Component({ template: '' }) +@Component({ template: '', changeDetection: ChangeDetectionStrategy.OnPush }) class EmptyComponent {} @Component({ @@ -56,7 +56,8 @@ class EmptyComponent {} [searchDebounceTime]="0" (searchEvent)="searchEvent($event)" (itemsChange)="itemsChange($event)" - />` + />`, + changeDetection: ChangeDetectionStrategy.OnPush }) class TestHostComponent { readonly items = signal<(MenuItem | NavbarVerticalItem)[]>([ diff --git a/projects/element-ng/navbar/si-navbar-item/si-navbar-item.component.ts b/projects/element-ng/navbar/si-navbar-item/si-navbar-item.component.ts index 8985f0e858..22a8a8d068 100644 --- a/projects/element-ng/navbar/si-navbar-item/si-navbar-item.component.ts +++ b/projects/element-ng/navbar/si-navbar-item/si-navbar-item.component.ts @@ -5,6 +5,7 @@ import { NgTemplateOutlet } from '@angular/common'; import { booleanAttribute, + ChangeDetectionStrategy, Component, DoCheck, inject, @@ -39,6 +40,7 @@ import { SiNavbarPrimaryComponent } from '../si-navbar-primary/si-navbar-primary SiIconComponent ], templateUrl: './si-navbar-item.component.html', + changeDetection: ChangeDetectionStrategy.Default, host: { class: 'd-contents' } }) export class SiNavbarItemComponent implements OnInit, DoCheck, OnDestroy { diff --git a/projects/element-ng/navbar/si-navbar-primary/si-navbar-primary.component.ts b/projects/element-ng/navbar/si-navbar-primary/si-navbar-primary.component.ts index c7e05345e3..d88e17da6e 100644 --- a/projects/element-ng/navbar/si-navbar-primary/si-navbar-primary.component.ts +++ b/projects/element-ng/navbar/si-navbar-primary/si-navbar-primary.component.ts @@ -6,6 +6,7 @@ import { A11yModule } from '@angular/cdk/a11y'; import { NgTemplateOutlet } from '@angular/common'; import { booleanAttribute, + ChangeDetectionStrategy, Component, input, OnChanges, @@ -71,7 +72,8 @@ import { AppItem, AppItemCategory } from './si-navbar-primary.model'; inline-size: auto; } `, - providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiNavbarPrimaryComponent }] + providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiNavbarPrimaryComponent }], + changeDetection: ChangeDetectionStrategy.Default }) export class SiNavbarPrimaryComponent implements OnChanges, HeaderWithDropdowns { /**