0
# NgRx Push Migration
1

2
Automated migration schematic to replace the `async` pipe with `ngrxPush` pipe for better performance and change detection optimization in NgRx applications.
3

4
## Overview
5

6
The NgRx Push Migration schematic automatically transforms templates in your Angular application to replace the standard `async` pipe with the more efficient `ngrxPush` pipe from `@ngrx/component`. This migration improves performance by providing better change detection control and reducing unnecessary re-renders.
7

8
## Capabilities
9

10
### Migration Execution
11

12
Scans your application for usage of the `async` pipe with NgRx observables and replaces them with `ngrxPush`.
13

14
```typescript { .api }
15
interface NgRxPushMigrationSchema {
16
  // This migration schematic has no configurable properties
17
  // It automatically scans and transforms the entire project
18
}
19
```
20

21
**CLI Usage:**
22

23
```bash
24
# Run the migration across your entire project
25
ng generate @ngrx/schematics:ngrx-push-migration
26

27
# Alternative using alias
28
ng generate @ngrx/schematics:ngrxpush
29
```
30

31
## Migration Behavior
32

33
### Before Migration
34

35
```html
36
<!-- Component template using async pipe -->
37
<div>{{ user$ | async }}</div>
38
<div *ngIf="isLoading$ | async">Loading...</div>
39
<ul>
40
  <li *ngFor="let item of items$ | async">{{ item.name }}</li>
41
</ul>
42
```
43

44
### After Migration
45

46
```html
47
<!-- Component template using ngrxPush pipe -->
48
<div>{{ user$ | ngrxPush }}</div>
49
<div *ngIf="isLoading$ | ngrxPush">Loading...</div>
50
<ul>
51
  <li *ngFor="let item of items$ | ngrxPush">{{ item.name }}</li>
52
</ul>
53
```
54

55
## Benefits
56

57
- **Better Performance**: `ngrxPush` provides more granular change detection control
58
- **Reduced Bundle Size**: Optimized for NgRx usage patterns
59
- **Improved Developer Experience**: Better debugging and error handling
60
- **Change Detection Optimization**: Works better with OnPush change detection strategy
61

62
## Requirements
63

64
- `@ngrx/component` must be installed in your project
65
- Compatible with Angular applications using NgRx state management
66
- Templates must use the `async` pipe with observable streams
67

68
## Implementation Notes
69

70
This migration:
71
- Automatically scans all component templates in your project
72
- Identifies usage of `async` pipe with observables
73
- Replaces `async` with `ngrxPush` where appropriate
74
- Ensures proper imports are added to components
75
- Does not require manual configuration or parameters