@magic-xpa/cli 4.1201.0-dev4121.307 → 4.1201.0-dev4121.308

package/src/schematics/mg-add/index.ts

@@ -15,7 +15,7 @@ import { LogLn } from "../magic-utils/Util";
 import { generate } from "../magic-utils/rules/generate.rule";
 import { GeneratedFileTypes } from "../../types/enums/generated-file-types.enum";
 import { MagicOptionScheme } from "../magic-utils/rules/magic-option.scheme";
-import {addProviderToModule, insertImport} from "../utils/devkit-utils/ast-utils";
+import {addProviderToModule, getDecoratorMetadata, insertImport} from "../utils/devkit-utils/ast-utils";
 import * as ts from 'typescript';
 import {InsertChange} from "../utils/devkit-utils/change";
 export function mgAdd(options:MagicOptionScheme): Rule {
@@ -32,7 +32,9 @@ export function mgAdd(options:MagicOptionScheme): Rule {
     updateTsConfigAppJson  (options),
 
     addLazyLoadProvider(),
-    // handel app.component.html
+
+    addZoneChangeDetectionProviderRule(),
+    //handel app.html
     //updateAppComponentHtmlFiles       (options),
 
     //handel package.Json
@@ -42,8 +44,8 @@ export function mgAdd(options:MagicOptionScheme): Rule {
 
 function updateAppComponentHtmlFiles(options:MagicOptionScheme): Rule {
   return generate({
-    template    : "./templates/angular/src/app/app.component.html.ejs",
-    name        : "app.component.html",
+    template    : "./templates/angular/src/app/app.html.ejs",
+    name        : "app.html",
     destination : env.metadata.paths.rootMagicGenFolder,
     type        :GeneratedFileTypes.HTML,
     data        : {
@@ -51,32 +53,75 @@ function updateAppComponentHtmlFiles(options:MagicOptionScheme): Rule {
     }
   },options)
 }
-function updateAngularJsonWithMagicStyle(options:MagicOptionScheme): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    const project   = env.project;
-    let   isDirty   = false;
+function updateAngularJsonWithMagicStyle(options:MagicOptionScheme): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    const project   = env.project;
+    let   isDirty   = false;
 
     let fullPathmagicStylePath = env.metadata.paths.magicStylePath;
-    if (!project.architect.test.options.styles.includes(fullPathmagicStylePath)) {
-      context.logger.info(`  [>]add file ${fullPathmagicStylePath} to test`);
-      project.architect.test.options.styles.push(fullPathmagicStylePath);
-      isDirty = true;
-    }
-
-    if (!project.architect.build.options.styles.includes(fullPathmagicStylePath)) {
-      context.logger.info(`  [>]add file ${fullPathmagicStylePath} to build`);
-      project.architect.build.options.styles.push(fullPathmagicStylePath);
-      isDirty = true;
-    }
-
-    if(isDirty){
-      let fullPath = env.metadata.paths.angularJsonPath;
-      host.overwrite(fullPath, JSON.stringify(env.workspace, null, 2));
-    }
+    // if (!project.architect.test.options.styles.includes(fullPathmagicStylePath)) {
+    //   context.logger.info(`  [>]add file ${fullPathmagicStylePath} to test`);
+    //   project.architect.test.options.styles.push(fullPathmagicStylePath);
+    //   isDirty = true;
+    // }
+
+    if (!project.architect.build.options.styles.includes(fullPathmagicStylePath)) {
+      context.logger.info(`  [>]add file ${fullPathmagicStylePath} to build`);
+      project.architect.build.options.styles.push(fullPathmagicStylePath);
+      isDirty = true;
+    }
+
+    const buildOptions = project?.architect?.build?.options;
+    const testOptions = project?.architect?.test?.options;
+
+    if (buildOptions) {
+      const changed = ensurePolyfills(buildOptions, ['zone.js']);
+      if (changed) {
+        context.logger.info(`  [>]add polyfill zone.js to build`);
+        isDirty = true;
+      }
+    }
+
+    if (testOptions) {
+      const changed = ensurePolyfills(testOptions, ['zone.js', 'zone.js/testing']);
+      if (changed) {
+        context.logger.info(`  [>]add polyfills zone.js, zone.js/testing to test`);
+        isDirty = true;
+      }
+    }
+
+    if(isDirty){
+      let fullPath = env.metadata.paths.angularJsonPath;
+      host.overwrite(fullPath, JSON.stringify(env.workspace, null, 2));
+    }
 
     return host;
-  };
-}
+  };
+}
+
+function ensurePolyfills(options: any, requiredPolyfills: string[]): boolean {
+  let polyfills: any[] = [];
+
+  if (Array.isArray(options.polyfills)) {
+    polyfills = [...options.polyfills];
+  } else if (typeof options.polyfills === 'string' && options.polyfills.trim()) {
+    polyfills = [options.polyfills];
+  }
+
+  let changed = !Array.isArray(options.polyfills);
+  for (const entry of requiredPolyfills) {
+    if (!polyfills.includes(entry)) {
+      polyfills.push(entry);
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    options.polyfills = polyfills;
+  }
+
+  return changed;
+}
 
 // Angular 10 , does not include .ts file for compilation
 // So to avoid compilation error , add *.module.ts in includes section
@@ -179,7 +224,7 @@ function addMagicModuleToAppModule(options: MagicOptionScheme) : Rule {
 
 function addLazyLoadProvider(): Rule {
   return (host: Tree) => {
-    const appmodule = env.metadata.paths.rootMagicGenFolder + '/app.module.ts';
+    const appmodule = env.metadata.paths.rootMagicGenFolder + '/app-module.ts';
 
     const lazyLoaderService = 'LazyLoaderService';
     const lazyLoaderServicePath = './magic/lazy-loader.service';
@@ -198,6 +243,8 @@ function addLazyLoadProvider(): Rule {
     }
     host.commitUpdate(providerRecorder);
 
+    sourceText = host.read(appmodule).toString('utf-8');
+    source = ts.createSourceFile(appmodule, sourceText, ts.ScriptTarget.Latest, true);
     const lazyLoaderServiceImport = insertImport(source, appmodule, lazyLoaderService, lazyLoaderServicePath, false);
     const lazyLoaderServiceChangesRecorder = host.beginUpdate(appmodule);
     if (lazyLoaderServiceImport instanceof InsertChange)
@@ -205,6 +252,8 @@ function addLazyLoadProvider(): Rule {
     host.commitUpdate(lazyLoaderServiceChangesRecorder);
 
     // add import for MagicLazyLoaderService
+    sourceText = host.read(appmodule).toString('utf-8');
+    source = ts.createSourceFile(appmodule, sourceText, ts.ScriptTarget.Latest, true);
     const magicLazyLoaderServiceImportChanges: InsertChange = <InsertChange>insertImport(source, appmodule, 'MagicLazyLoaderService', '@magic-xpa/angular', false);
     const magicImportChangesRecorder = host.beginUpdate(appmodule);
     magicImportChangesRecorder.insertLeft(magicLazyLoaderServiceImportChanges.pos, magicLazyLoaderServiceImportChanges.toAdd)
@@ -212,3 +261,87 @@ function addLazyLoadProvider(): Rule {
   }
 }
 
+function addZoneChangeDetectionProviderRule(): Rule {
+  return (host: Tree) => {
+    // Resolve the generated root module path (src/app/app-module.ts in this project layout).
+    const appmodule = env.metadata.paths.rootMagicGenFolder + '/app-module.ts';
+
+    // Append provideZoneChangeDetection() to NgModule.providers if it does not already exist.
+    addZoneChangeDetectionProvider(host, appmodule);
+
+    // Re-parse from disk after provider update so import insertion uses fresh AST positions.
+    const sourceText = host.read(appmodule).toString('utf-8');
+    const source = ts.createSourceFile(appmodule, sourceText, ts.ScriptTarget.Latest, true);
+
+    // Ensure the symbol import exists; insertImport is idempotent and avoids duplicates.
+    const zoneChangeDetectionImport = insertImport(source, appmodule, 'provideZoneChangeDetection', '@angular/core', false);
+    const zoneChangeDetectionImportChangesRecorder = host.beginUpdate(appmodule);
+    if (zoneChangeDetectionImport instanceof InsertChange)
+      zoneChangeDetectionImportChangesRecorder.insertLeft(zoneChangeDetectionImport.pos, zoneChangeDetectionImport.toAdd);
+    host.commitUpdate(zoneChangeDetectionImportChangesRecorder);
+  };
+}
+
+function addZoneChangeDetectionProvider(host: Tree, appmodule: string): void {
+  const zoneProvider = 'provideZoneChangeDetection()';
+  const sourceText = host.read(appmodule).toString('utf-8');
+  const source = ts.createSourceFile(appmodule, sourceText, ts.ScriptTarget.Latest, true);
+
+  // Locate the first @NgModule({...}) metadata object in app-module.ts.
+  const ngModules = getDecoratorMetadata(source, 'NgModule', '@angular/core');
+
+  if (!ngModules.length) {
+    return;
+  }
+
+  const ngModuleMetadata = ngModules[0] as ts.ObjectLiteralExpression;
+  // Find the `providers` property assignment inside @NgModule metadata.
+  const providersProperty = ngModuleMetadata.properties
+    .filter(ts.isPropertyAssignment)
+    .find((prop: ts.PropertyAssignment) => {
+      if (ts.isIdentifier(prop.name)) {
+        return prop.name.text === 'providers';
+      }
+
+      return ts.isStringLiteral(prop.name) && prop.name.text === 'providers';
+    });
+
+  if (!providersProperty || !ts.isArrayLiteralExpression(providersProperty.initializer)) {
+    return;
+  }
+
+  const providersArray = providersProperty.initializer;
+  // Keep this operation idempotent: do nothing if provider already exists.
+  const hasZoneProvider = providersArray.elements.some((el: ts.Expression) => {
+    return el.getText(source).replace(/\s+/g, '') === zoneProvider;
+  });
+
+  if (hasZoneProvider) {
+    return;
+  }
+
+  let insertPos: number;
+  let toAdd: string;
+  if (providersArray.elements.length === 0) {
+    // Empty providers: inject the item directly between [].
+    insertPos = providersArray.getEnd() - 1;
+    toAdd = zoneProvider;
+  } else {
+    // Non-empty providers: append after last provider, preserving line formatting when possible.
+    const lastProvider = providersArray.elements[providersArray.elements.length - 1];
+    insertPos = lastProvider.getEnd();
+    const lastProviderText = lastProvider.getFullText(source);
+    const newLineMatch = lastProviderText.match(/^\r?\n(\r?)\s+/);
+    if (newLineMatch) {
+      toAdd = `,${newLineMatch[0]}${zoneProvider}`;
+    } else {
+      toAdd = `, ${zoneProvider}`;
+    }
+  }
+
+  // Apply the computed insertion at the exact Abstract Syntax Tree-derived position.
+  const recorder = host.beginUpdate(appmodule);
+  recorder.insertLeft(insertPos, toAdd);
+  host.commitUpdate(recorder);
+}
+

package/templates/angular/src/{app.module.ts → app-module.ts}

@@ -2,7 +2,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 
-import {AppComponent} from './app.component';
+import {App} from './app';
 import {DynamicModule} from 'ng-dynamic-component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ComponentArray, compHash, title} from './component-list.g';
@@ -30,7 +30,7 @@ import {MagicModule,ComponentListMagicService} from '@magic-xpa/angular';
 
 
 @NgModule({
-   declarations: [AppComponent, ...ComponentArray],
+   declarations: [App, ...ComponentArray],
    imports: [
       // Angular modules
       BrowserModule,
@@ -59,7 +59,7 @@ import {MagicModule,ComponentListMagicService} from '@magic-xpa/angular';
       InfiniteScrollDirective,
       DynamicModule.withComponents(ComponentArray)
    ],
-   bootstrap: [AppComponent],
+   bootstrap: [App],
 })
 export class AppModule {
    constructor(componentList:ComponentListMagicService) {

package/templates/angular/src/{app.component.ts → app.ts}

@@ -12,5 +12,5 @@ declare let myExtObject: any;
     `,
     standalone: false,
   })
-export class AppComponent {
+export class App {
 }

package/templates/attributes/common/row_editing_button_attributes.ejs

@@ -1,10 +1,10 @@
 <% if (ctrl.props.is_table_child && ctrl.controlType === MgControlType.CTRL_TYPE_BUTTON) {%>
   <% if ( ctrl.props.row_editing_type && ctrl.props.row_editing_type !== RowEditingTypes.NoneRowEditing) {%>
     <% if ( ctrl.props.row_editing_type === RowEditingTypes.EnterRowEditing) {%>
-      *ngIf="!mg.isRowInRowEditing(row)"
+      [hidden]="mg.isRowInRowEditing(row)"
     <%}%>
     <% if ( ctrl.props.row_editing_type === RowEditingTypes.SaveRowEditing || ctrl.props.row_editing_type === RowEditingTypes.CancelRowEditing) {%>
-*ngIf="mg.isRowInRowEditing(row)"
+[hidden]="!mg.isRowInRowEditing(row)"
 <%}%>
   <%}%>
 <%}%>

package/templates/themes/basicHTML/combobox.ejs

@@ -6,32 +6,35 @@
 
   <%# show combo box in table only while we on row edit  %>
   <% if (ctrl.props.is_table_child) { %>
-  <div *ngIf="mg.isRowInRowEditing(row)">
+  @if (mg.isRowInRowEditing(row)) {
+  <div>
     <%}%>
         <select
                 <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
                 <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
                 <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %> required <%}%>
         >
-            <option
-                    *ngFor="let o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>);"
-                    [selected]="o.index == mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)"
-                    [value] = "o.index"
-            >
+            @for (o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>); track $index) {
+            <option [selected]="o.index == mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)"
+                    [value] = "o.index">
                 {{o.displayValue}}
             </option>
+            }
         </select>
             <% if (ctrl.props.must_input || ctrl.props.validator != null) {%>
     <mgError [magic]=<%- ctrl.props.directive_id %>> </mgError>
             <%}%>
   <% if (ctrl.props.is_table_child) { %>
      </div>
+     }
 
      <%# show lable in table only while we on row read only  %>
-     <div *ngIf="!mg.isRowInRowEditing(row)">
+     @if (!mg.isRowInRowEditing(row)) {
+     <div>
           <label <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
           {{ mg.getDisplayValue(<%- ctrl.props.enum_id %>, row.rowId) }}
           </label>
      </div>
+     }
   <%}%>
 </div>

package/templates/themes/basicHTML/edit.ejs

@@ -8,7 +8,8 @@
                 <div  >
                 <% if (ctrl.style &&  ctrl.style.multiline_edit ){ %>
 
-                <textarea *ngIf="mg.isRowInRowEditing(row)"
+                @if (mg.isRowInRowEditing(row)) {
+                <textarea
                         type="text"
                         <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
                         <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
@@ -20,16 +21,17 @@
                         <% if (ctrl.props.validator) { %><%- ctrl.props.validator %><%}%>
                 >
                 </textarea>
+                }
 
                 <% } else { %>
+                <% if(ctrl.props.is_table_child){ %>
+                  @if (mg.isRowInRowEditing(row)) {
+                <%}%>
                 <input
                   <% if (ctrl.props.show_zoom_button  ){ %>
                   style="width: 70%"
                   <% } %>
                   <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
-                  <% if(ctrl.props.is_table_child){ %>
-                    *ngIf="mg.isRowInRowEditing(row)"
-                  <%}%>
 
                   <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
                     <% if (ctrl.props.currency) { %>
@@ -52,13 +54,16 @@
                         <%- ' '%>
                         <% if (ctrl.props.validator) { %><%- ctrl.props.validator %><%}%>
                 />
+                <% if(ctrl.props.is_table_child){ %>
+                  }
+                <%}%>
                 <% } %>
                   <%- include(`../../attributes/common/input/validation`, {ctrl : ctrl}) %>
 
                   <% if(ctrl.props.is_table_child){ %>
 
+                  @if (!mg.isRowInRowEditing(row)) {
                   <label
-                      *ngIf="!mg.isRowInRowEditing(row)"
                      <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
                      <% if (ctrl.props.currency  ) { %>
                        {{mg.getFormattedValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)
@@ -71,6 +76,7 @@
 
 
                   </label>
+                  }
                   <%}%>
                   <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
                 </div>
@@ -78,8 +84,8 @@
         case StorageAttributeType.Date: %>
 
      <% if(ctrl.props.is_table_child){ %>
+     @if (mg.isRowInRowEditing(row)) {
      <div
-       *ngIf="mg.isRowInRowEditing(row)"
        style="display: flex; flex-direction: row">
        <%}%>
 
@@ -102,24 +108,26 @@
 
        <% if(ctrl.props.is_table_child){ %>
      </div>
+     }
      <%}%>
 
 
      <% if(ctrl.props.is_table_child){ %>
+     @if (!mg.isRowInRowEditing(row)) {
      <label
-       *ngIf="!mg.isRowInRowEditing(row)"
        <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
        {{mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)
        <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
      </label>
+     }
      <%}%>
        <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
         <% break;
 
         case StorageAttributeType.Time: %>
      <% if(ctrl.props.is_table_child){ %>
+     @if (mg.isRowInRowEditing(row)) {
      <div
-       *ngIf="mg.isRowInRowEditing(row)"
        style="display: flex; flex-direction: row">
        <%}%>
 
@@ -141,15 +149,17 @@
 
        <% if(ctrl.props.is_table_child){ %>
      </div>
+     }
      <%}%>
 
      <% if(ctrl.props.is_table_child){ %>
+     @if (!mg.isRowInRowEditing(row)) {
      <label
-       *ngIf="!mg.isRowInRowEditing(row)"
        <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
        {{mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)
        <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
      </label>
+     }
      <%}%>
        <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
         <% break;

package/templates/themes/basicHTML/image.ejs

@@ -1,6 +1,7 @@
-
-<div *ngIf="mg.isImageExists(<%- ctrl.props.enum_id %>)">
+@if (mg.isImageExists(<%- ctrl.props.enum_id %>)) {
+<div>
     <img    <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
             <%- include('../../attributes/common/base/enabled', {ctrl : ctrl}) %>
             [src]="mg.getImage(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)" />
 </div>
+}

package/templates/themes/basicHTML/listbox.ejs

@@ -8,12 +8,11 @@
         <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %> required <%}%>
 >
     <%# build of items in listbox %>
-    <option
-            *ngFor="let o of mg.getItemListValues(<%-ctrl.props.enum_id%>);"
-            [value] = "o.index"
-    >
+    @for (o of mg.getItemListValues(<%-ctrl.props.enum_id%>); track $index) {
+    <option [value] = "o.index">
         {{o.displayValue}}
     </option>
+    }
 </select>
     <% if (ctrl.props.must_input || ctrl.props.validator != null) {%>
       <mgError [magic]=<%- ctrl.props.directive_id %>> </mgError>

package/templates/themes/basicHTML/push-button.ejs

@@ -25,4 +25,3 @@ case CtrlButtonTypeGui.Hypertext : %>
   <%- include('../../attributes/common/format.ejs', {ctrl : ctrl}) %>
 </button>
 <% } %> %>
-

package/templates/themes/basicHTML/radio.ejs

@@ -2,8 +2,8 @@
      <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
      (change)="task.mgOnRadioSelectionChanged(<%-ctrl.props.enum_id%>)"
      >
-     <div
-        *ngFor="let o of mg.getItemListValues(<%-ctrl.props.enum_id%>);">
+     @for (o of mg.getItemListValues(<%-ctrl.props.enum_id%>); track $index) {
+     <div>
         <label>
            <input
                 type="radio"
@@ -14,6 +14,7 @@
            {{o.displayValue}}
         </label>
      </div>
+     }
     <% if (ctrl.props.must_input || ctrl.props.validator != null) {%>
     <mgError [magic]=<%- ctrl.props.directive_id %>> </mgError>
     <%}%>

package/templates/themes/basicHTML/tab.ejs

@@ -12,7 +12,8 @@
         <% }%>
 
         <%# add buttons for each tab page%>
-        <div  *ngFor="let o of mg.getItemListValues(<%-ctrl.props.enum_id%>)">
+        @for (o of mg.getItemListValues(<%-ctrl.props.enum_id%>); track $index) {
+        <div>
             <button class="tab_button"
                     <%- include('../../attributes/common/base/enabled', {ctrl : ctrl}) %>
                     (click)="task.mgOnTabSelectionChanged(<%-ctrl.props.enum_id%>, o.index)"
@@ -21,6 +22,7 @@
                 {{mg.getTabpageText(<%- ctrl.props.enum_id %>, o.index)}}
             </button>
         </div>
+        }
 
         <% if ( tab_side == SideType.Top) { %>
             <%# add tab pages after adding the buttons, so the buttons are at the top%>

package/templates/themes/basicHiddenHTML/radio.ejs

@@ -2,8 +2,8 @@
         <%- include('../../attributes/common/no_control_base_attributes', {ctrl : ctrl}) %>
         magicMark="magicRadio"
 >
-    <div
-            *ngFor="let o of mgGetListboxValues(<%-ctrl.props.enum_id%>);">
+    @for (o of mgGetListboxValues(<%-ctrl.props.enum_id%>); track $index) {
+    <div>
         <label>
             <input
                     type="radio"
@@ -14,4 +14,5 @@
             {{o.displayValue}}
         </label>
     </div>
+    }
 </div>

package/templates/themes/basicHiddenHTML/table.ejs

@@ -7,12 +7,16 @@
      (scrolled)="tableService.onScrollDown()"
      [scrollWindow]="false"
 >
-    <div *ngFor="let row of task.Records.list">
-        <div *ngIf="mg.ifRowCreated(row)" id="row">
+    @for (row of task.Records.list; track $index) {
+        <div>
+        @if (mg.ifRowCreated(row)) {
+        <div id="row">
             <form [formGroup]="mg.getFormGroupByRow(row.rowId)" class="table_row"
                   [ngClass]="{ 'selected': mg.isRowSelected(<%= ctrl.props.enum_id %>, row.rowId)}">
                 <%- include(`../container`, {ctrl: ctrl}) %>
             </form>
         </div>
-    </div>
+        }
+        </div>
+    }
 </div>

package/templates/themes/container.ejs

@@ -6,6 +6,9 @@
         <% if (line_id !== null) {%>
             <% if( typeof child.props.common_line_id === "undefined" || child.props.common_line_id !== line_id) {%>
                 </div>
+                <% if (ctrl.props.web_style === TableWebStyle.MatGrid) { %>
+                }
+                <% } %>
                 <% line_id = null;%>
         <%}}%>
 
@@ -13,7 +16,12 @@
             <% if (line_id === null && typeof child.props.common_line_id !== "undefined" &&
                     child.controlType !== MgControlType.CTRL_TYPE_TAB) { %>
                          <% line_id = child.props.common_line_id; %>
-                        <div style="display: flex; flex-direction: row"  <% if (  ctrl.props.web_style === TableWebStyle.MatGrid) { %>*ngIf="mg.ifRowCreated(row)" <%}%>   >
+                        <% if (ctrl.props.web_style === TableWebStyle.MatGrid) { %>
+                        @if (mg.ifRowCreated(row)) {
+                        <div style="display: flex; flex-direction: row">
+                        <% } else { %>
+                        <div style="display: flex; flex-direction: row">
+                        <% } %>
             <%}%>
 
                 <%- include(`./control`, {child: child}) %>
@@ -23,4 +31,7 @@
     <%# close the line-wrapping div, in case it was left open %>
     <%if (line_id !== null) {%>
         </div>
+        <% if (ctrl.props.web_style === TableWebStyle.MatGrid) { %>
+        }
+        <% } %>
 <%}} %>

package/templates/themes/material/combobox.ejs

@@ -6,7 +6,8 @@
 
   <%# show combo box in table only while we on row edit  %>
   <% if (ctrl.props.is_table_child) { %>
-  <div *ngIf="mg.isRowInRowEditing(row)">
+  @if (mg.isRowInRowEditing(row)) {
+  <div>
     <%}%>
 
     <% if (ctrl.props.editable) { %>
@@ -29,13 +30,11 @@
                 required
                 <% } %>
         >
-            <mat-option
-                    *ngFor="let o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>);"
-
-                    [value]="o.index"
-            >
+            @for (o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>); track $index) {
+            <mat-option [value]="o.index">
                 {{o.displayValue}}
             </mat-option>
+            }
         </mat-select>
     </mat-form-field>
 
@@ -47,12 +46,15 @@
 
     <% if (ctrl.props.is_table_child) { %>
     </div>
+    }
     <%# show lable in table only while we on row read only  %>
-     <div *ngIf="!mg.isRowInRowEditing(row)">
+     @if (!mg.isRowInRowEditing(row)) {
+     <div>
          <label <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
              {{ mg.getDisplayValue(<%- ctrl.props.enum_id %>, row.rowId) }}
           </label>
      </div>
+     }
      <%}%>
 
   </div>