fix: zoneless ShowVideoFormComponent

FraunhoferIOSB · Jun 21, 2024 · 0256c12 · 0256c12
1 parent 824ce27
commit 0256c12
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 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
@@ -388,8 +388,7 @@ export class AASTreeComponent implements OnInit, OnDestroy {
     private async showVideoAsync(name: string, src: string): Promise<void> {
         try {
             const modalRef = this.modal.open(ShowVideoFormComponent, { backdrop: 'static' });
-            modalRef.componentInstance.name = name;
-            modalRef.componentInstance.video = src;
+            modalRef.componentInstance.initialize(name, src);
             await modalRef.result;
         } catch (error) {
             if (error) {

diff --git a/projects/aas-lib/src/lib/aas-tree/show-video-form/show-video-form.component.html b/projects/aas-lib/src/lib/aas-tree/show-video-form/show-video-form.component.html
@@ -9,12 +9,12 @@
 <div class="modal-header">
     <h4 class="modal-title text-info">
         <i class="bi bi-film"></i>
-        <span class="ms-2">{{name}}</span>
+        <span class="ms-2">{{name()}}</span>
     </h4>
     <button type="button" class="close" (click)="close()"> </button>
 </div>
 <div class="modal-body">
-    <video width="760" height="570" [src]="video" controls autoplay muted></video>
+    <video width="760" height="570" [src]="video()" controls autoplay muted></video>
 </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-video-form/show-video-form.component.ts b/projects/aas-lib/src/lib/aas-tree/show-video-form/show-video-form.component.ts
@@ -6,7 +6,7 @@
  *
  *****************************************************************************/
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -16,13 +16,19 @@ import { TranslateModule } from '@ngx-translate/core';
     styleUrls: ['./show-video-form.component.scss'],
     standalone: true,
     imports: [TranslateModule],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShowVideoFormComponent {
     public constructor(private readonly modal: NgbActiveModal) {}
 
-    public name!: string;
+    public readonly name = signal('');
 
-    public video!: string;
+    public readonly video = signal('');
+
+    public initialize(name: string, video: string): void {
+        this.name.set(name);
+        this.video.set(video);
+    }
 
     public close(): void {
         this.modal.close();