fix: zoneless ShowImageComponent

FraunhoferIOSB · Jun 21, 2024 · 824ce27 · 824ce27
1 parent 8d52f69
commit 824ce27
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/projects/aas-lib/src/lib/aas-tree/aas-tree.component.ts b/projects/aas-lib/src/lib/aas-tree/aas-tree.component.ts
@@ -376,8 +376,7 @@ export class AASTreeComponent implements OnInit, OnDestroy {
     private async showImageAsync(name: string, src: string): Promise<void> {
         try {
             const modalRef = this.modal.open(ShowImageFormComponent, { backdrop: 'static' });
-            modalRef.componentInstance.name = name;
-            modalRef.componentInstance.image = src;
+            modalRef.componentInstance.initialize(name, src);
             await modalRef.result;
         } catch (error) {
             if (error) {

diff --git a/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.html b/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.html
@@ -9,12 +9,12 @@
 <div class="modal-header">
     <h4 class="modal-title text-info">
         <i class="bi bi-image"></i>
-        <span class="ms-2">{{name}}</span>
+        <span class="ms-2">{{name()}}</span>
     </h4>
     <button type="button" class="btn-close" (click)="close()"> </button>
 </div>
 <div class="modal-body">
-    <fhg-img classname="img-fluid" [src]="image" [alt]="name" [width]="600" [height]="400"/>
+    <fhg-img classname="img-fluid" [src]="image()" [alt]="name()" [width]="600" [height]="400"/>
 </div>
 <div class="modal-footer">
     <button type="button" class="btn btn-primary" (click)="close()" translate>CMD_CLOSE</button>

diff --git a/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.ts b/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.ts
@@ -6,24 +6,30 @@
  *
  *****************************************************************************/
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { SecuredImageComponent } from '../../secured-image/secured-image.component';
-import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'fhg-show-image',
     templateUrl: './show-image-form.component.html',
     styleUrls: ['./show-image-form.component.scss'],
     standalone: true,
     imports: [SecuredImageComponent, TranslateModule],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShowImageFormComponent {
     public constructor(private readonly modal: NgbActiveModal) {}
 
-    public name!: string;
+    public readonly name = signal('');
 
-    public image!: string;
+    public readonly image = signal('');
+
+    public initialize(name: string, image: string): void {
+        this.name.set(name);
+        this.image.set(image);
+    }
 
     public close(): void {
         this.modal.close();