arti24
/
arti-angular-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ChangeDetectionStrategy.OnPush

This commit is contained in:
Artur 2024-11-15 00:48:54 +01:00
parent 35c83ad335
commit b3987347fe
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/asset-calculator/asset-calculator.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ReactiveFormsModule, FormGroup, Validators, FormControl, FormArray } from '@angular/forms'; import { ReactiveFormsModule, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { DecimalPipe } from '@angular/common'; import { DecimalPipe } from '@angular/common';
import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange, AssetDepreciationMethod, YearMonthUtil } from '../assets/asset'; import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange, AssetDepreciationMethod, YearMonthUtil } from '../assets/asset';
import {AssetService} from '../assets/service/asset.service' import {AssetService} from '../assets/service/asset.service'
import {TranslateModule} from "@ngx-translate/core"; import {TranslateModule} from "@ngx-translate/core";
import { debounceTime } from 'rxjs/operators';
interface FormValues { interface FormValues {
initialValueAsset: number; initialValueAsset: number;
@ -15,6 +16,7 @@ interface FormValues {
} }
@Component({ @Component({
selector: 'app-asset-calculator', selector: 'app-asset-calculator',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [ DecimalPipe, ReactiveFormsModule, TranslateModule ] , imports: [ DecimalPipe, ReactiveFormsModule, TranslateModule ] ,
templateUrl: "asset-calculator.component.html", templateUrl: "asset-calculator.component.html",
@ -39,9 +41,9 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
[key in keyof FormValues]: FormControl<FormValues[key]> [key in keyof FormValues]: FormControl<FormValues[key]>
}); });
constructor(private assetService : AssetService){ constructor(private assetService : AssetService, private cdr: ChangeDetectorRef){
this.assetsDepreciationFormGroup.valueChanges.subscribe( (value) => this.calculate() ); this.assetsDepreciationFormGroup.valueChanges.pipe(debounceTime(300)).subscribe( (value) => this.calculate() );
this.lifeFormArray.valueChanges.subscribe( (value) => this.calculate() ); this.lifeFormArray.valueChanges.pipe(debounceTime(300)).subscribe( (value) => this.calculate() );
} }
@ -75,6 +77,7 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
} ); } );
}); });
} }
this.cdr.detectChanges(); // Immediately update the view after patching
} }
@ -105,9 +108,9 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
this.assetService.calculate(asset).subscribe(positions => { this.assetService.calculate(asset).subscribe(positions => {
this.amortizations = positions; this.amortizations = positions;
this.calculateToValues(positions); this.calculateToValues(positions);
this.cdr.markForCheck(); // Trigger change detection
}); });
localStorage.setItem('assetForCalculator', JSON.stringify(asset));
} }
calculateForAsset( asset : Asset ) { calculateForAsset( asset : Asset ) {
@ -155,11 +158,12 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
this.lifeFormArray.push(newFormGroup); this.lifeFormArray.push(newFormGroup);
// this.lifeSignal.set( this.lifeFormArray ); this.cdr.markForCheck(); // Notify Angular of change
} }
removeChange(index: number) { removeChange(index: number) {
this.lifeFormArray.removeAt(index); this.lifeFormArray.removeAt(index);
this.cdr.markForCheck(); // Trigger detection after removal
} }
} }