feat(*): enforce ChangeDetection.OnPush

.eslintrc.json

@@ -29,6 +29,9 @@
                         "style": "kebab-case"
                     }
                 ],
+                "@angular-eslint/prefer-on-push-component-change-detection": [
+                    "error"
+                ],
                 "no-secrets/no-secrets": ["error", { "tolerance": 4.3 }]
             }
         },

angular.json

@@ -510,6 +510,11 @@
       },
       "@schematics/angular:resolver": {
         "typeSeparator": "."
+      },
+      "@schematics/angular": {
+        "component": {
+          "changeDetection": "OnPush"
+        }
       }
     }
 }

projects/ppwcode/ng-async/src/lib/async-result/async-result.component.ts

@@ -1,4 +1,14 @@
-import { Component, contentChild, inject, input, InputSignal, Signal, TemplateRef, Type } from '@angular/core'
+import {
+    ChangeDetectionStrategy,
+    Component,
+    contentChild,
+    inject,
+    input,
+    InputSignal,
+    Signal,
+    TemplateRef,
+    Type
+} from '@angular/core'
 import { Severity } from '@ppwcode/ng-common-components'
 import { AsyncResult } from '../models/async-result'
 import {
@@ -15,7 +25,8 @@ import {
     selector: 'ppw-async-result',
     templateUrl: './async-result.component.html',
     /* eslint-disable @angular-eslint/prefer-standalone */
-    standalone: false
+    standalone: false,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AsyncResultComponent {
     // Dependencies

projects/ppwcode/ng-common/src/lib/global-error-handler/global-error-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, inject, DOCUMENT } from '@angular/core'
+import { ChangeDetectionStrategy, Component, DOCUMENT, inject } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MatDialogModule } from '@angular/material/dialog'
 import { MatExpansionModule } from '@angular/material/expansion'
@@ -10,7 +10,8 @@ import { GLOBAL_ERROR_DIALOG_OPTIONS, GlobalErrorDialogOptions } from './global-
     selector: 'ppw-global-error-dialog',
     templateUrl: './global-error-dialog.component.html',
     styleUrl: './global-error-dialog.component.scss',
-    imports: [MatDialogModule, TranslatePipe, MatExpansionModule, MatButtonModule]
+    imports: [MatDialogModule, TranslatePipe, MatExpansionModule, MatButtonModule],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GlobalErrorDialogComponent {
     #options: GlobalErrorDialogOptions = inject(GLOBAL_ERROR_DIALOG_OPTIONS)

projects/ppwcode/ng-common/src/lib/mixins/handle-subscriptions.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'
 import { interval } from 'rxjs'
 import { mixinHandleSubscriptions } from './handle-subscriptions'
@@ -44,6 +44,7 @@ describe('Handle subscriptions mixin', () => {
 @Component({
     template: '',
     /* eslint-disable @angular-eslint/prefer-standalone */
-    standalone: false
+    standalone: false,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 class TestComponent extends mixinHandleSubscriptions() {}

projects/ppwcode/ng-dialogs/src/lib/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { ThemePalette } from '@angular/material/core'
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'
@@ -35,7 +35,8 @@ export interface ConfirmationDialogData {
         DraggableDialogDirective,
         CdkDragHandle
     ],
-    styleUrls: ['./confirmation-dialog.component.scss']
+    styleUrls: ['./confirmation-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ConfirmationDialogComponent {
     public data: ConfirmationDialogData = inject(MAT_DIALOG_DATA)

projects/ppwcode/ng-router/src/lib/breadcrumb/breadcrumb.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Signal } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject, Signal } from '@angular/core'
 import { RouterLink } from '@angular/router'
 import { TranslatePipe } from '@ngx-translate/core'
 import { BreadcrumbProviderOptions } from './breadcrumb-provider-options.model'
@@ -9,7 +9,8 @@ import { BREADCRUMB_PROVIDER_OPTIONS, BreadcrumbService } from './breadcrumb.ser
     selector: 'ppw-breadcrumb',
     templateUrl: './breadcrumb.component.html',
     imports: [RouterLink, TranslatePipe],
-    styleUrls: ['./breadcrumb.component.scss']
+    styleUrls: ['./breadcrumb.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BreadcrumbComponent {
     #breadcrumbService: BreadcrumbService = inject(BreadcrumbService)

projects/ppwcode/ng-wireframe/src/lib/left-sidenav/left-sidenav.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule, NgOptimizedImage } from '@angular/common'
 import {
+    ChangeDetectionStrategy,
     Component,
     inject,
     input,
@@ -19,7 +20,8 @@ import { NavigationItem } from '../navigation-item/navigation-item.model'
     selector: 'ppw-left-sidenav',
     imports: [CommonModule, MatIconModule, MatListModule, TranslatePipe, NgOptimizedImage],
     templateUrl: './left-sidenav.component.html',
-    styleUrls: ['./left-sidenav.component.scss']
+    styleUrls: ['./left-sidenav.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LeftSidenavComponent implements OnChanges {
     // Inputs

projects/ppwcode/ng-wireframe/src/lib/pagination-bar/pagination-bar.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, input, InputSignal, Signal, viewChild } from '@angular/core'
+import { ChangeDetectionStrategy, Component, input, InputSignal, Signal, viewChild } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { createEmptyPagedEntities, createSuccessAsyncResult, PagedAsyncResult, PagedEntities } from '@ppwcode/ng-async'
 import { PaginationBarComponent } from './pagination-bar.component'
@@ -38,7 +38,8 @@ describe('Pagination bar component', () => {
 @Component({
     template: '<ppw-pagination-bar [pagedAsyncResult]="value()"></ppw-pagination-bar>',
     /* eslint-disable @angular-eslint/prefer-standalone */
-    standalone: false
+    standalone: false,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 class TestComponent {
     value: InputSignal<PagedAsyncResult<unknown, unknown> | PagedEntities<unknown>> = input.required()

projects/ppwcode/ng-wireframe/src/lib/pagination-bar/pagination-bar.component.ts

@@ -1,12 +1,22 @@
-import { Component, computed, input, InputSignal, output, OutputEmitterRef, Signal } from '@angular/core'
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+    InputSignal,
+    output,
+    OutputEmitterRef,
+    Signal
+} from '@angular/core'
 
 import { MatPaginatorModule, PageEvent } from '@angular/material/paginator'
 import { isAsyncResult, PagedAsyncResult, PagedEntities } from '@ppwcode/ng-async'
 
 @Component({
     selector: 'ppw-pagination-bar',
     imports: [MatPaginatorModule],
-    templateUrl: './pagination-bar.component.html'
+    templateUrl: './pagination-bar.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PaginationBarComponent {
     // Inputs

projects/ppwcode/ng-wireframe/src/lib/toolbar/toolbar.component.ts

@@ -1,4 +1,14 @@
-import { Component, computed, inject, input, InputSignal, output, OutputEmitterRef, Signal } from '@angular/core'
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+    InputSignal,
+    output,
+    OutputEmitterRef,
+    Signal
+} from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { MatButtonModule } from '@angular/material/button'
 import { MatIconModule } from '@angular/material/icon'
@@ -11,7 +21,8 @@ import { filter, startWith } from 'rxjs'
     selector: 'ppw-toolbar',
     imports: [MatIconModule, MatMenuModule, MatButtonModule],
     templateUrl: './toolbar.component.html',
-    styleUrls: ['./toolbar.component.scss']
+    styleUrls: ['./toolbar.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToolbarComponent {
     #translateService: TranslateService = inject(TranslateService)

projects/ppwcode/ng-wireframe/src/lib/wireframe/wireframe.component.ts

@@ -1,6 +1,15 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
 import { CommonModule } from '@angular/common'
-import { Component, computed, inject, input, InputSignal, Signal, viewChild } from '@angular/core'
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+    InputSignal,
+    Signal,
+    viewChild
+} from '@angular/core'
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
 import { MatIcon } from '@angular/material/icon'
 import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav'
@@ -25,7 +34,8 @@ import { ToolbarComponent } from '../toolbar/toolbar.component'
         RouterLink
     ],
     templateUrl: './wireframe.component.html',
-    styleUrls: ['./wireframe.component.scss']
+    styleUrls: ['./wireframe.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class WireframeComponent {
     #observer: BreakpointObserver = inject(BreakpointObserver)

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { NgOptimizedImage } from '@angular/common'
-import { Component, computed, inject, signal, Signal } from '@angular/core'
+import { ChangeDetectionStrategy, Component, computed, inject, signal, Signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { MatCard, MatCardContent } from '@angular/material/card'
 import { MatIcon } from '@angular/material/icon'
@@ -26,7 +26,8 @@ import LanguageSelectComponent from './language-select/language-select.component
         WireframeComponent,
         NgOptimizedImage,
         RouterLink
-    ]
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent extends mixinResponsiveObservers() {
     readonly #translate: TranslateService = inject(TranslateService)

src/app/components-dashboard-demo/components-dashboard-demo.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, inject, Signal, TemplateRef, viewChild } from '@angular/core'
+import { ChangeDetectionStrategy, Component, computed, inject, Signal, TemplateRef, viewChild } from '@angular/core'
 import { MatIcon } from '@angular/material/icon'
 import { MatProgressSpinner } from '@angular/material/progress-spinner'
 import { Router } from '@angular/router'
@@ -10,7 +10,8 @@ import { ROUTE_MAP } from '../app.routes'
     selector: 'ppw-components-dashboard-demo',
     imports: [DashboardItemsTableComponent, MatIcon, MatProgressSpinner],
     templateUrl: './components-dashboard-demo.component.html',
-    styleUrl: './components-dashboard-demo.component.scss'
+    styleUrl: './components-dashboard-demo.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export default class ComponentsDashboardDemoComponent {
     #router: Router = inject(Router)

src/app/components-page-container/components-page-container.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { RouterOutlet } from '@angular/router'
 
 @Component({
     selector: 'ppw-components-page-container',
     imports: [RouterOutlet],
     templateUrl: './components-page-container.component.html',
-    styleUrl: './components-page-container.component.scss'
+    styleUrl: './components-page-container.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export default class ComponentsPageContainerComponent {}

src/app/confirmation-dialog-demo/confirmation-dialog-demo.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MatDialog, MatDialogModule } from '@angular/material/dialog'
 import { ConfirmationDialogComponent, ConfirmationDialogData } from '@ppwcode/ng-dialogs'
@@ -7,7 +7,8 @@ import { ConfirmationDialogComponent, ConfirmationDialogData } from '@ppwcode/ng
     selector: 'ppw-confirmation-dialog-demo',
     imports: [MatDialogModule, MatButtonModule],
     templateUrl: './confirmation-dialog-demo.component.html',
-    styleUrls: ['./confirmation-dialog-demo.component.scss']
+    styleUrls: ['./confirmation-dialog-demo.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export default class ConfirmationDialogDemoComponent {
     private matDialog: MatDialog = inject(MatDialog)

src/app/dashboard-item-demo/dashboard-item-demo.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, inject, Signal, TemplateRef, viewChild } from '@angular/core'
+import { ChangeDetectionStrategy, Component, computed, inject, Signal, TemplateRef, viewChild } from '@angular/core'
 import { Router } from '@angular/router'
 import { DashboardItem, DashboardItemAction, DashboardItemsTableComponent } from '@ppwcode/ng-common-components'
 import { getFullRoutePath } from '@ppwcode/ng-router'
@@ -8,7 +8,8 @@ import { ROUTE_MAP } from '../app.routes'
     selector: 'ppw-dashboard-item-demo',
     imports: [DashboardItemsTableComponent],
     templateUrl: './dashboard-item-demo.component.html',
-    styleUrl: './dashboard-item-demo.component.scss'
+    styleUrl: './dashboard-item-demo.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DashboardItemDemoComponent {
     #router: Router = inject(Router)

src/app/editable-table/editable-table.component.ts

@@ -1,5 +1,5 @@
 import { JsonPipe } from '@angular/common'
-import { Component, inject, OnInit, Signal, viewChild } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject, OnInit, Signal, viewChild } from '@angular/core'
 import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'
 import { MatIconButton } from '@angular/material/button'
 import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card'
@@ -35,7 +35,8 @@ type TodosForm = {
         JsonPipe
     ],
     templateUrl: './editable-table.component.html',
-    styleUrl: './editable-table.component.scss'
+    styleUrl: './editable-table.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export default class EditableTableComponent implements OnInit {
     ppwTable: Signal<FormTableComponent<Todo>> = viewChild.required(FormTableComponent)

src/app/expandable-card/expandable-card-demo.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { ExpandableCardComponent } from '@ppwcode/ng-common-components'
 
 @Component({
     selector: 'ppw-expandable-card-demo',
     templateUrl: './expandable-card-demo.component.html',
     styleUrls: ['./expandable-card-demo.component.scss'],
-    imports: [ExpandableCardComponent]
+    imports: [ExpandableCardComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export default class ExpandableCardDemoComponent {}

src/app/global-error-handler/global-error-handler.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MessageBarComponent, Severity } from '@ppwcode/ng-common-components'
 
 @Component({
     selector: 'ppw-global-error-handler',
     imports: [MatButtonModule, MessageBarComponent],
-    templateUrl: './global-error-handler.component.html'
+    templateUrl: './global-error-handler.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GlobalErrorHandlerComponent {
     protected readonly Severity = Severity

src/app/logging/in-memory-logging-demo/in-memory-logging-demo.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MatListModule } from '@angular/material/list'
 import { InMemoryLogger, PPW_LOGGER, provideInMemoryLogger } from '@ppwcode/ng-common'
@@ -14,7 +14,8 @@ export interface LogLine extends Record<string, unknown> {
     imports: [MatButtonModule, MatListModule, PpwTableModule, MessageBarComponent],
     templateUrl: './in-memory-logging-demo.component.html',
     styleUrl: './in-memory-logging-demo.component.scss',
-    providers: [provideInMemoryLogger({ debug: true })]
+    providers: [provideInMemoryLogger({ debug: true })],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class InMemoryLoggingDemoComponent {
     #logger: InMemoryLogger = inject(PPW_LOGGER) as InMemoryLogger

src/app/message-bar/message-bar.component.ts

@@ -1,12 +1,13 @@
-import { Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 
 import { MessageBarComponent as PpwMessageBarComponent, Severity } from '@ppwcode/ng-common-components'
 
 @Component({
     selector: 'ppw-message-bar-demo',
     imports: [PpwMessageBarComponent],
     templateUrl: './message-bar.component.html',
-    styleUrls: ['./message-bar.component.scss']
+    styleUrls: ['./message-bar.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export default class MessageBarComponent {
     public readonly severity: typeof Severity = Severity

src/app/table/empty-async-result.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { MessageBarComponent, Severity } from '@ppwcode/ng-common-components'
 
 @Component({
     selector: 'ppw-empty-async-result-component',
     template:
         '<ppw-message-bar [severity]="Severity.warning" message="This async result returned unexpectedly with a null value."></ppw-message-bar>',
-    imports: [MessageBarComponent]
+    imports: [MessageBarComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EmptyAsyncResultComponent {
     protected readonly Severity = Severity