chore(demo): migrate to use onpush

Author: santoshyadavdev

modules/component-store/spec/integration.spec.ts

@@ -1,9 +1,4 @@
-import {
-  Component,
-  Type,
-  Injectable,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { ChangeDetectorRef, Component, Type, Injectable } from '@angular/core';
 import { ComponentStore } from '../src';
 import {
   TestBed,
@@ -111,8 +106,8 @@ describe('ComponentStore integration', () => {
       expect(state.prop2Changes).toEqual([undefined, 0, 1, 2, 3]);
 
       state.parent.isChildVisible = false;
-      state.fixture.changeDetectorRef.markForCheck();
-      state.fixture.changeDetectorRef.detectChanges();
+      state.fixture.componentRef.injector.get(ChangeDetectorRef).markForCheck();
+      state.fixture.detectChanges();
 
       tick(20);
       // Still at the same values, so effect stopped running
@@ -123,8 +118,8 @@ describe('ComponentStore integration', () => {
       state.child.init();
 
       state.parent.isChildVisible = false;
-      state.fixture.changeDetectorRef.markForCheck();
-      state.fixture.changeDetectorRef.detectChanges();
+      state.fixture.componentRef.injector.get(ChangeDetectorRef).markForCheck();
+      state.fixture.detectChanges();
 
       state.destroy();
 
@@ -211,7 +206,6 @@ describe('ComponentStore integration', () => {
       <child></child>
     }`,
     standalone: false,
-    changeDetection: ChangeDetectionStrategy.Eager,
   })
   class ParentComponent implements Parent {
     isChildVisible = true;

modules/component/spec/let/let.directive.spec.ts

@@ -1,5 +1,4 @@
 import {
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   Directive,
@@ -37,7 +36,6 @@ import { LetDirective } from '../..';
     }}</ng-container>
   `,
   imports: [JsonPipe, LetDirective],
-  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class LetDirectiveTestComponent {
   value$: unknown;
@@ -50,7 +48,6 @@ class LetDirectiveTestComponent {
     }}</ng-container>
   `,
   imports: [LetDirective],
-  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class LetDirectiveTestErrorComponent {
   value$ = of(42);
@@ -63,7 +60,6 @@ class LetDirectiveTestErrorComponent {
     }}</ng-container>
   `,
   imports: [LetDirective],
-  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class LetDirectiveTestCompleteComponent {
   value$ = of(42);
@@ -74,7 +70,6 @@ class LetDirectiveTestCompleteComponent {
     <ng-container *ngrxLet="value$ as value">{{ value }}</ng-container>
   `,
   imports: [LetDirective],
-  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class LetDirectiveTestSuspenseComponent {
   value$ = of(42);
@@ -88,7 +83,6 @@ class LetDirectiveTestSuspenseComponent {
     <ng-template #loading>Loading...</ng-template>
   `,
   imports: [LetDirective],
-  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class LetDirectiveTestSuspenseTplComponent {
   value$ = of(42);
@@ -110,7 +104,6 @@ export class RecursiveDirective {
     }}</ng-container>
   `,
   imports: [RecursiveDirective, LetDirective],
-  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class LetDirectiveTestRecursionComponent {
   constructor(public subject: BehaviorSubject<number>) {}
@@ -220,7 +213,9 @@ const setupLetDirectiveTestRecursionComponent = (): void => {
 };
 
 function markAndDetect() {
-  fixtureLetDirectiveTestComponent.componentRef.changeDetectorRef.markForCheck();
+  fixtureLetDirectiveTestComponent.componentRef.injector
+    .get(ChangeDetectorRef)
+    .markForCheck();
   fixtureLetDirectiveTestComponent.detectChanges();
 }
 

modules/component/spec/push/push.pipe.spec.ts

@@ -1,5 +1,4 @@
 import {
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ErrorHandler,
@@ -32,7 +31,6 @@ let pushPipe: PushPipe;
 @Component({
   template: ` {{ (value$ | ngrxPush | json) || 'undefined' }} `,
   imports: [PushPipe, JsonPipe],
-  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class PushPipeTestComponent {
   value$: unknown = of(42);
@@ -56,7 +54,9 @@ const setupPushPipeComponent = () => {
 };
 
 function markAndDetect() {
-  fixturePushPipeTestComponent.componentRef.changeDetectorRef.markForCheck();
+  fixturePushPipeTestComponent.componentRef.injector
+    .get(ChangeDetectorRef)
+    .markForCheck();
   fixturePushPipeTestComponent.detectChanges();
 }
 

projects/example-app/src/app/auth/components/login-form.component.ts

@@ -1,10 +1,4 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 import { Credentials } from '@example-app/auth/models';
 
@@ -84,7 +78,6 @@ import { Credentials } from '@example-app/auth/models';
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class LoginFormComponent {

projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component } from '@angular/core';
 
 /**
  * The dialog will close with true if user clicks the ok button,
@@ -31,7 +31,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class LogoutConfirmationDialogComponent {}

projects/example-app/src/app/auth/containers/login-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Credentials } from '@example-app/auth/models';
 import * as fromAuth from '@example-app/auth/reducers';
@@ -15,7 +15,6 @@ import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
     </bc-login-form>
   `,
   styles: [],
-  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class LoginPageComponent {

projects/example-app/src/app/books/components/book-authors.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
 
@@ -17,7 +17,6 @@ import { Book } from '@example-app/books/models';
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class BookAuthorsComponent {

projects/example-app/src/app/books/components/book-detail.component.ts

@@ -1,10 +1,4 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
 
@@ -73,7 +67,6 @@ import { Book } from '@example-app/books/models';
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class BookDetailComponent {

projects/example-app/src/app/books/components/book-preview-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
 
@@ -16,7 +16,6 @@ import { Book } from '@example-app/books/models';
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class BookPreviewListComponent {

projects/example-app/src/app/books/components/book-preview.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
 
@@ -76,7 +76,6 @@ import { Book } from '@example-app/books/models';
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class BookPreviewComponent {