diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts index d8186cec63d..f056cac08bd 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts @@ -6,7 +6,15 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, inject, input, output, signal} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, + input, + output, + signal, +} from '@angular/core'; import {MatIcon} from '@angular/material/icon'; import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu'; import {MatSlideToggle} from '@angular/material/slide-toggle'; @@ -54,6 +62,7 @@ type Tab = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree'; MatSlideToggle, ], providers: [TabUpdate], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DevToolsTabsComponent { readonly isHydrationEnabled = input(false); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts index 98cdf222df0..8c45d6676f3 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts @@ -16,6 +16,7 @@ import { output, signal, viewChild, + ChangeDetectionStrategy, } from '@angular/core'; import { ComponentExplorerView, @@ -98,6 +99,7 @@ const sameDirectives = (a: IndexedNode, b: IndexedNode) => { SignalsTabComponent, ResponsiveSplitDirective, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DirectiveExplorerComponent { readonly showCommentNodes = input(false); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts index bb258e32fa7..8cc15850bc2 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts @@ -7,6 +7,7 @@ */ import { + ChangeDetectionStrategy, Component, computed, effect, @@ -25,6 +26,7 @@ import {MatIcon} from '@angular/material/icon'; templateUrl: './breadcrumbs.component.html', styleUrls: ['./breadcrumbs.component.scss'], imports: [MatIcon], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class BreadcrumbsComponent { readonly parents = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts index 4ced1aea11c..343708cc730 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, output} from '@angular/core'; import {MatIcon} from '@angular/material/icon'; export type FilterMatch = { @@ -44,6 +44,7 @@ const genericSearchGenerator: FilterFnGenerator = (filter: string) => { templateUrl: './filter.component.html', styleUrls: ['./filter.component.scss'], imports: [MatIcon], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FilterComponent { readonly filter = output(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view/defer-view.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view/defer-view.component.ts index ba3dc413bf1..15854389c9f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view/defer-view.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view/defer-view.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core'; import {MatToolbar} from '@angular/material/toolbar'; import {DeferInfo} from '../../../../../../../protocol'; @@ -15,6 +15,7 @@ import {DeferInfo} from '../../../../../../../protocol'; selector: 'ng-defer-view', styleUrls: ['./defer-view.component.scss'], imports: [MatToolbar], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DeferViewComponent { readonly defer = input.required>(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts index d78ccb4dad8..9e54f6897fb 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, output} from '@angular/core'; import {DirectivePosition} from '../../../../../../protocol'; import {IndexedNode} from '../directive-forest/index-forest'; @@ -20,6 +20,7 @@ import {DeferViewComponent} from './defer-view/defer-view.component'; templateUrl: './property-tab.component.html', styleUrls: ['./property-tab.component.scss'], imports: [PropertyTabHeaderComponent, PropertyTabBodyComponent, DeferViewComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class PropertyTabComponent { readonly currentSelectedElement = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.ts index ff1fc5e55f3..b6cf5031ce5 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input} from '@angular/core'; import {SerializedInjectedService} from '../../../../../../../protocol'; import {ResolutionPathComponent} from './resolution-path/resolution-path.component'; import {MatTooltip} from '@angular/material/tooltip'; @@ -17,6 +17,7 @@ import {MatExpansionModule} from '@angular/material/expansion'; templateUrl: './dependency-viewer.component.html', styleUrl: './dependency-viewer.component.scss', imports: [MatExpansionModule, MatTooltip, ResolutionPathComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DependencyViewerComponent { readonly dependency = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts index eb313ae6ba4..4831fcf0143 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts @@ -15,6 +15,7 @@ import { output, signal, viewChild, + ChangeDetectionStrategy, } from '@angular/core'; import {FormsModule} from '@angular/forms'; import {ContainerType} from '../../../../../../../protocol'; @@ -40,6 +41,7 @@ const parseValue = (value: EditorResult): EditorResult => { selector: 'ng-property-editor', styleUrls: ['./property-editor.component.scss'], imports: [FormsModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class PropertyEditorComponent { readonly key = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts index 6fbd79f28bd..76449fe02d8 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core'; import {PropType} from '../../../../../../../protocol'; import {FlatNode} from '../../property-resolver/element-property-resolver'; @@ -15,6 +15,7 @@ import {FlatNode} from '../../property-resolver/element-property-resolver'; selector: 'ng-property-preview', templateUrl: './property-preview.component.html', styleUrls: ['./property-preview.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class PropertyPreviewComponent { readonly node = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts index 453ef6b9338..ecc12667934 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core'; import {DirectivePosition} from '../../../../../../../protocol'; import {IndexedNode} from '../../directive-forest/index-forest'; @@ -18,6 +18,7 @@ import {PropertyViewComponent} from './property-view.component'; selector: 'ng-property-tab-body', styleUrls: ['./property-tab-body.component.scss'], imports: [PropertyViewComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class PropertyTabBodyComponent { readonly currentSelectedElement = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts index 152285a1e9b..ae614ab263a 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts @@ -8,6 +8,7 @@ import {CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag} from '@angular/cdk/drag-drop'; import { + ChangeDetectionStrategy, Component, ɵFramework as Framework, computed, @@ -42,6 +43,7 @@ import {DependencyViewerComponent} from './dependency-viewer.component'; CdkDrag, PropertyViewTreeComponent, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class PropertyViewBodyComponent { readonly controller = input.required(); @@ -134,6 +136,7 @@ export class PropertyViewBodyComponent { `, ], imports: [DependencyViewerComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class InjectedServicesComponent { readonly controller = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts index c0fa7b4ea30..665b418ab58 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, inject, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core'; import {MatIcon} from '@angular/material/icon'; import {MatTooltip} from '@angular/material/tooltip'; import {MatToolbar} from '@angular/material/toolbar'; @@ -18,6 +18,7 @@ import {FrameManager} from '../../../../application-services/frame_manager'; templateUrl: './property-view-header.component.html', styleUrls: ['./property-view-header.component.scss'], imports: [MatToolbar, MatTooltip, MatIcon], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class PropertyViewHeaderComponent { readonly directive = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts index 8126cd4a912..840e163606e 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, inject, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core'; import {DirectivePosition} from '../../../../../../../protocol'; import {ElementPropertyResolver, FlatNode} from '../../property-resolver/element-property-resolver'; @@ -18,6 +18,7 @@ import {PropertyViewHeaderComponent} from './property-view-header.component'; templateUrl: './property-view.component.html', styleUrls: ['./property-view.component.scss'], imports: [PropertyViewHeaderComponent, PropertyViewBodyComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class PropertyViewComponent { readonly directive = input.required<{name: string}>(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.ts index d6d1a1fe280..75427dc3716 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path/resolution-path.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core'; import {SerializedInjector} from '../../../../../../../../protocol'; export const NODE_TYPE_CLASS_MAP: {[key in SerializedInjector['type']]: string} = { @@ -21,6 +21,7 @@ export const NODE_TYPE_CLASS_MAP: {[key in SerializedInjector['type']]: string} selector: 'ng-resolution-path', templateUrl: './resolution-path.component.html', styleUrl: './resolution-path.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ResolutionPathComponent { readonly path = input([]); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view/signals-value-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view/signals-value-tree.component.ts index 3682abcb9a5..46adba8ebda 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view/signals-value-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view/signals-value-tree.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input} from '@angular/core'; import {FlatTreeControl} from '@angular/cdk/tree'; import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular/material/tree'; import {MatIcon} from '@angular/material/icon'; @@ -30,6 +30,7 @@ export interface Property { templateUrl: './signals-value-tree.component.html', imports: [MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding, MatIcon], styleUrl: './signals-value-tree.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class SignalsValueTreeComponent { readonly treeControl = input.required>(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts index aa9c32b6027..c51a809ad3a 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, inject, input, signal} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, signal} from '@angular/core'; import {MatIcon} from '@angular/material/icon'; import {MatTableModule} from '@angular/material/table'; import {MatTooltip} from '@angular/material/tooltip'; @@ -23,6 +23,7 @@ import {ButtonComponent} from '../../../shared/button/button.component'; templateUrl: './injector-providers.component.html', styleUrl: './injector-providers.component.scss', imports: [MatTableModule, MatIcon, MatTooltip, ButtonComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class InjectorProvidersComponent { readonly injector = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts index 772cc16cfbf..435e0ed2107 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts @@ -8,6 +8,7 @@ import { afterRenderEffect, + ChangeDetectionStrategy, Component, computed, ElementRef, @@ -73,6 +74,7 @@ const HIERARCHY_HOR_SIZE = 50; host: { '[hidden]': 'hidden()', }, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class InjectorTreeComponent { private readonly environmentTree = viewChild('environmentTree'); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts index 66727405f82..1205ec5b992 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, inject, signal} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core'; import {MatDialog} from '@angular/material/dialog'; import {MatIcon} from '@angular/material/icon'; import {MatTooltip} from '@angular/material/tooltip'; @@ -28,6 +28,7 @@ const PROFILER_VERSION = 1; templateUrl: './profiler.component.html', styleUrls: ['./profiler.component.scss'], imports: [MatTooltip, MatIcon, RecordingTimelineComponent, ButtonComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ProfilerComponent { readonly state = signal('idle'); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts index 03138872047..02f6698ec06 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts @@ -13,6 +13,7 @@ import { } from '@angular/cdk/scrolling'; import { afterRenderEffect, + ChangeDetectionStrategy, Component, computed, ElementRef, @@ -70,6 +71,7 @@ function framesBoundSignal(source: Signal, defaultValue: T) ButtonComponent, DecimalPipe, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FrameSelectorComponent { private readonly tabUpdate = inject(TabUpdate); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-modal/recording-dialog/recording-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-modal/recording-dialog/recording-dialog.component.ts index 68d704a9172..82507cbbd11 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-modal/recording-dialog/recording-dialog.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-modal/recording-dialog/recording-dialog.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component} from '@angular/core'; +import {Component, ChangeDetectionStrategy} from '@angular/core'; import {MatProgressBar} from '@angular/material/progress-bar'; @Component({ @@ -14,5 +14,6 @@ import {MatProgressBar} from '@angular/material/progress-bar'; templateUrl: './recording-dialog.component.html', styleUrls: ['./recording-dialog.component.scss'], imports: [MatProgressBar], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class RecordingDialogComponent {} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.ts index c600473de4e..5aa05902f8a 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.ts @@ -6,7 +6,16 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, effect, input, linkedSignal, output, signal} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + effect, + input, + linkedSignal, + output, + signal, +} from '@angular/core'; import {ProfilerFrame} from '../../../../../../protocol'; import {Observable} from 'rxjs'; @@ -32,6 +41,7 @@ import {estimateFrameRate} from './shared/estimate-frame-rate'; RecordingVisualizerComponent, VisualizerControlsComponent, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class RecordingTimelineComponent { readonly stream = input.required>(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.ts index a923624cd95..b9e8511e42c 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, input, output} from '@angular/core'; +import {Component, computed, input, output, ChangeDetectionStrategy} from '@angular/core'; import {ButtonComponent} from '../../shared/button/button.component'; export type RowType = 'text' | 'chip' | 'flag' | 'list'; @@ -16,6 +16,7 @@ export type RowType = 'text' | 'chip' | 'flag' | 'list'; templateUrl: './route-details-row.component.html', styleUrls: ['./route-details-row.component.scss'], imports: [ButtonComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class RouteDetailsRowComponent { readonly label = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts index c295ef1c0b1..8bc6dd14401 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts @@ -6,8 +6,17 @@ * found in the LICENSE file at https://angular.dev/license */ -import {CommonModule} from '@angular/common'; -import {afterNextRender, Component, effect, inject, input, signal, viewChild} from '@angular/core'; +import {JsonPipe} from '@angular/common'; +import { + afterNextRender, + ChangeDetectionStrategy, + Component, + effect, + inject, + input, + signal, + viewChild, +} from '@angular/core'; import {TreeVisualizerHostComponent} from '../../shared/tree-visualizer-host/tree-visualizer-host.component'; import {MatIconModule} from '@angular/material/icon'; import {ApplicationOperations} from '../../application-operations/index'; @@ -33,7 +42,7 @@ const DEFAULT_FILTER = /.^/; templateUrl: './router-tree.component.html', styleUrls: ['./router-tree.component.scss'], imports: [ - CommonModule, + JsonPipe, TreeVisualizerHostComponent, SplitComponent, SplitAreaDirective, @@ -41,7 +50,7 @@ const DEFAULT_FILTER = /.^/; RouteDetailsRowComponent, ButtonComponent, ], - standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class RouterTreeComponent { private routerTree = viewChild.required('routerTree'); diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts index a06f0118f7a..18334ad8caa 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools.component.ts @@ -7,7 +7,15 @@ */ import {animate, style, transition, trigger} from '@angular/animations'; -import {Component, computed, inject, OnDestroy, OnInit, signal} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, + OnDestroy, + OnInit, + signal, +} from '@angular/core'; import {Events, MessageBus, SupportedApis} from '../../../protocol'; import {interval} from 'rxjs'; @@ -55,6 +63,7 @@ const LAST_SUPPORTED_VERSION = 9; ], imports: [DevToolsTabsComponent, MatTooltip, MatProgressSpinnerModule, MatTooltipModule], providers: [WINDOW_PROVIDER, ThemeService], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DevToolsComponent implements OnDestroy { readonly AngularStatus = AngularStatus; diff --git a/devtools/projects/ng-devtools/src/lib/shared/tree-visualizer-host/tree-visualizer-host.component.ts b/devtools/projects/ng-devtools/src/lib/shared/tree-visualizer-host/tree-visualizer-host.component.ts index 29d80cc5649..e38c417c665 100644 --- a/devtools/projects/ng-devtools/src/lib/shared/tree-visualizer-host/tree-visualizer-host.component.ts +++ b/devtools/projects/ng-devtools/src/lib/shared/tree-visualizer-host/tree-visualizer-host.component.ts @@ -6,7 +6,14 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, ElementRef, input, signal, viewChild} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + input, + signal, + viewChild, +} from '@angular/core'; let instanceIdx = 0; @@ -25,6 +32,7 @@ let instanceIdx = 0; `, styleUrl: 'tree-visualizer-host.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class TreeVisualizerHostComponent { readonly container = viewChild.required('container');