refactor: trigger cd on image valueChanges

src/app/pages/settings/chains/chain-form/chain-form.ts

@@ -1,28 +1,44 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, input, OnDestroy, OnInit } from '@angular/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ImageUploader } from '../../../../components/image-uploader/image-uploader';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ChainFormGroup } from '../chain-formgroup';
 import { TranslatePipe } from '@ngx-translate/core';
-import { UpperfirstPipe } from "../../../../pipes/upperfirst-pipe";
+import { UpperfirstPipe } from '../../../../pipes/upperfirst-pipe';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-chain-form',
-  imports: [MatFormFieldModule, MatInputModule, ImageUploader, ReactiveFormsModule, TranslatePipe, UpperfirstPipe],
+  imports: [
+    ImageUploader,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    UpperfirstPipe,
+  ],
   templateUrl: './chain-form.html',
   styles: ``,
 })
-export class ChainForm {
-  form = input(new ChainFormGroup())
-  
-  get file() {
-    return this.form().controls.image.value;
+export class ChainForm implements OnInit, OnDestroy {
+  form = input(new ChainFormGroup());
+  private readonly cd = inject(ChangeDetectorRef);
+  private imageSubscription?: Subscription;
+
+  ngOnInit() {
+    this.imageSubscription = this.form().controls.image.valueChanges.subscribe({
+      next: () => this.cd.detectChanges(),
+    });
   }
-  
+
   updateFileImage(file: File) {
     const form = this.form();
     form.controls.image.patchValue(file);
     form.controls.image.markAsDirty();
   }
+
+  ngOnDestroy() {
+    this.imageSubscription?.unsubscribe();
+  }
 }