Fix dialog rendering in 8 components after Angular 20→21 migration

gui-js/libs/menu/src/lib/edit/dimensions/dimensions.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ElectronService } from '@minsky/core';
 import { dateTimeFormats } from '@minsky/shared';
@@ -44,7 +44,7 @@ export class DimensionsComponent implements OnInit {
     return this.form.get('dimensions') as FormArray;
   }
 
-  constructor(private electronService: ElectronService) {
+  constructor(private electronService: ElectronService, private cdRef: ChangeDetectorRef) {
     this.form = new FormGroup({ dimensions: new FormArray([]) });
   }
 
@@ -58,6 +58,7 @@ export class DimensionsComponent implements OnInit {
           this.originalDimensionNames.push(key);
           this.dimensions.push(this.createDimension(key, args));
         }
+        this.cdRef.detectChanges();
       }
     })();
   }

gui-js/libs/ui-components/src/lib/cli-input/cli-input.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ElectronService } from '@minsky/core';
 import { CppClass, unExposedTerminalCommands } from '@minsky/shared';
@@ -44,7 +44,7 @@ export class CliInputComponent implements OnInit, OnDestroy {
     return this.form.get('args');
   }
 
-  constructor(private electronService: ElectronService) {}
+  constructor(private electronService: ElectronService, private cdRef: ChangeDetectorRef) {}
 
   async ngOnInit() {
     this.form = new FormGroup({
@@ -68,6 +68,7 @@ export class CliInputComponent implements OnInit, OnDestroy {
 
       this.commands = [..._commands, ...unExposedTerminalCommands];
     }
+    this.cdRef.detectChanges();
   }
 
   async handleSubmit() {

gui-js/libs/ui-components/src/lib/connect-database/connect-database.component.ts

@@ -33,6 +33,7 @@ export class ConnectDatabaseComponent {
 
   async ngOnInit() {
     this.backends=await this.ravel.db.backends();
+    this.cdRef.detectChanges();
   }
 
   setDbType(event) {

gui-js/libs/ui-components/src/lib/edit-user-function/edit-user-function.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { ElectronService } from '@minsky/core';
@@ -35,7 +35,8 @@ export class EditUserFunctionComponent implements OnInit {
 
   constructor(
     private electronService: ElectronService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private cdRef: ChangeDetectorRef
   ) {
     this.form = new FormGroup({
       name: new FormControl(''),
@@ -61,6 +62,7 @@ export class EditUserFunctionComponent implements OnInit {
     this.name.setValue(this.itemName);
     this.rotation.setValue(await this.udf.rotation());
     this.expression.setValue(await this.udf.expression());
+    this.cdRef.detectChanges();
   }
 
   async handleSave() {

gui-js/libs/ui-components/src/lib/new-pub-tab/new-pub-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { ElectronService } from '@minsky/core';
@@ -23,7 +23,8 @@ export class NewPubTabComponent implements OnInit {
   editDescriptionForm: FormGroup;
   constructor(
     private route: ActivatedRoute,
-    private electronService: ElectronService
+    private electronService: ElectronService,
+    private cdRef: ChangeDetectorRef
   ) {}
 
   async ngOnInit() {
@@ -36,6 +37,7 @@ export class NewPubTabComponent implements OnInit {
     });
     if (this.type==='rename')
       this.editDescriptionForm.get('description').setValue(await this.pubTab.name());
+    this.cdRef.detectChanges();
   }
 
   async handleSave() {

gui-js/libs/ui-components/src/lib/pen-styles/pen-styles.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ElectronService } from '@minsky/core';
 import { PlotWidget } from '@minsky/shared';
@@ -47,7 +47,7 @@ export class PenStylesComponent implements OnInit {
     return this.form.get('pens') as FormArray;
   }
 
-  constructor(private electronService: ElectronService) {
+  constructor(private electronService: ElectronService, private cdRef: ChangeDetectorRef) {
     this.form = new FormGroup({
       pens: new FormArray([]),
     });
@@ -64,6 +64,7 @@ export class PenStylesComponent implements OnInit {
       this.palette.forEach((p) => {
         this.pens.push(this.createPen(p));
       });
+      this.cdRef.detectChanges();
     })();
   }
 

gui-js/libs/ui-components/src/lib/ravel-select-horizontal-dim/ravel-select-horizontal-dim.component.ts

@@ -35,6 +35,7 @@ export class RavelSelectHorizontalDimComponent implements OnInit  {
 
   async ngOnInit() {
     this.dataCols=await this.ravel.db.numericalColumnNames();
+    this.cdRef.detectChanges();
   }
 
   clickDim(event: Event) {

gui-js/libs/ui-components/src/lib/summary/summary.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ElectronService } from '@minsky/core';
 import { ActivatedRoute } from '@angular/router';
 import { ScaleHandler } from '../scale-handler/scale-handler.class';
@@ -31,7 +31,7 @@ export class SummaryComponent implements OnInit {
 
   scale = new ScaleHandler();
 
-  constructor(private electronService: ElectronService, route: ActivatedRoute) {}
+  constructor(private electronService: ElectronService, route: ActivatedRoute, private cdRef: ChangeDetectorRef) {}
 
   append(o: Object, key: string, v) {
     if (o[key])
@@ -85,6 +85,7 @@ export class SummaryComponent implements OnInit {
     // prevent wiring tab handlers from interfering with this tab
     document.body.onkeydown=null;
     document.body.onkeyup=null;
+    this.cdRef.detectChanges();
   }
 
   types(category: string): string[] {