diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 883fb49fe2..37f05a892e 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -1,5 +1,11 @@
-import {EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA} from './../../tokens/extensions.token';
-import {ABP, LocalizationModule, PermissionDirective, ShowPasswordDirective, TrackByService} from '@abp/ng.core';
+import { EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA } from './../../tokens/extensions.token';
+import {
+  ABP,
+  LocalizationModule,
+  PermissionDirective,
+  ShowPasswordDirective,
+  TrackByService,
+} from '@abp/ng.core';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -18,6 +24,7 @@ import {
 import {
   ControlContainer,
   FormGroupDirective,
+  FormsModule,
   ReactiveFormsModule,
   ValidatorFn,
 } from '@angular/forms';
@@ -28,20 +35,20 @@ import {
   NgbTimepickerModule,
   NgbTypeaheadModule,
 } from '@ng-bootstrap/ng-bootstrap';
-import {Observable, of} from 'rxjs';
-import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
-import {DateAdapter, DisabledDirective, TimeAdapter} from '@abp/ng.theme.shared';
-import {EXTRA_PROPERTIES_KEY} from '../../constants/extra-properties';
-import {FormProp} from '../../models/form-props';
-import {PropData} from '../../models/props';
-import {selfFactory} from '../../utils/factory.util';
-import {addTypeaheadTextSuffix} from '../../utils/typeahead.util';
-import {eExtensibleComponents} from '../../enums/components';
-import {ExtensibleDateTimePickerComponent} from '../date-time-picker/extensible-date-time-picker.component';
-import {NgxValidateCoreModule} from '@ngx-validate/core';
-import {ExtensibleFormPropService} from '../../services/extensible-form-prop.service';
-import {CreateInjectorPipe} from '../../pipes/create-injector.pipe';
-import { CommonModule} from '@angular/common';
+import { Observable, of } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { DateAdapter, DisabledDirective, TimeAdapter } from '@abp/ng.theme.shared';
+import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
+import { FormProp } from '../../models/form-props';
+import { PropData } from '../../models/props';
+import { selfFactory } from '../../utils/factory.util';
+import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
+import { eExtensibleComponents } from '../../enums/components';
+import { ExtensibleDateTimePickerComponent } from '../date-time-picker/extensible-date-time-picker.component';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
+import { CreateInjectorPipe } from '../../pipes/create-injector.pipe';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'abp-extensible-form-prop',
@@ -60,6 +67,7 @@ import { CommonModule} from '@angular/common';
     PermissionDirective,
     LocalizationModule,
     CommonModule,
+    FormsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [ExtensibleFormPropService],
@@ -69,8 +77,8 @@ import { CommonModule} from '@angular/common';
       useFactory: selfFactory,
       deps: [[new Optional(), new SkipSelf(), ControlContainer]],
     },
-    {provide: NgbDateAdapter, useClass: DateAdapter},
-    {provide: NgbTimeAdapter, useClass: TimeAdapter},
+    { provide: NgbDateAdapter, useClass: DateAdapter },
+    { provide: NgbTimeAdapter, useClass: TimeAdapter },
   ],
 })
 export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
@@ -103,8 +111,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   }
 
   setTypeaheadValue(selectedOption: ABP.Option<string>) {
-    this.typeaheadModel = selectedOption || {key: null, value: null};
-    const {key, value} = this.typeaheadModel;
+    this.typeaheadModel = selectedOption || { key: null, value: null };
+    const { key, value } = this.typeaheadModel;
     const [keyControl, valueControl] = this.getTypeaheadControls();
     if (valueControl?.value && !value) valueControl.markAsDirty();
     keyControl?.setValue(key);
@@ -114,10 +122,10 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   search = (text$: Observable<string>) =>
     text$
       ? text$.pipe(
-        debounceTime(300),
-        distinctUntilChanged(),
-        switchMap(text => this.prop?.options?.(this.data, text) || of([])),
-      )
+          debounceTime(300),
+          distinctUntilChanged(),
+          switchMap(text => this.prop?.options?.(this.data, text) || of([])),
+        )
       : of([]);
 
   typeaheadFormatter = (option: ABP.Option<any>) => option.key;
@@ -130,7 +138,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   }
 
   private getTypeaheadControls() {
-    const {name} = this.prop;
+    const { name } = this.prop;
     const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
     const keyControl =
       this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
@@ -158,9 +166,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     return this.service.getType(prop);
   }
 
-  ngOnChanges({prop, data}: SimpleChanges) {
+  ngOnChanges({ prop, data }: SimpleChanges) {
     const currentProp = prop?.currentValue as FormProp;
-    const {options, readonly, disabled, validators, className, template} = currentProp || {};
+    const { options, readonly, disabled, validators, className, template } = currentProp || {};
     if (template) {
       this.injectorForCustomComponent = Injector.create({
         providers: [
@@ -172,7 +180,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
             provide: EXTENSIONS_FORM_PROP_DATA,
             useValue: (data?.currentValue as PropData)?.record,
           },
-          {provide: ControlContainer, useExisting: FormGroupDirective},
+          { provide: ControlContainer, useExisting: FormGroupDirective },
         ],
         parent: this.injector,
       });
@@ -194,6 +202,6 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
     const [keyControl, valueControl] = this.getTypeaheadControls();
     if (keyControl && valueControl)
-      this.typeaheadModel = {key: keyControl.value, value: valueControl.value};
+      this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
   }
 }
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
index c0cdcbea6d..739fe6a114 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
@@ -1,33 +1,35 @@
-<ng-container *ngIf="form">
-
-  <ng-container *ngFor="let groupedProp of groupedPropList.items">
+@if (form) {
+  @for (groupedProp of groupedPropList.items; track $index) {
     <ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
-
-      <div *ngIf="groupedProp.group?.className; else withoutClassName"
-           [class]="groupedProp.group?.className" [attr.data-name]="groupedProp.group?.className">
-        <ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{groupedProp:groupedProp,data:data}">
-        </ng-container>
-      </div>
-
-      <ng-template #withoutClassName>
-        <ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{groupedProp:groupedProp,data:data}">
-        </ng-container>
-      </ng-template>
+      @if(groupedProp.group?.className) {
+        <div [ngClass]="groupedProp.group?.className"
+             [attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
+        >
+          <ng-container
+            [ngTemplateOutlet]="propListTemplate"
+            [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
+          >
+          </ng-container>
+        </div>
+      } @else {
+          <ng-container
+            [ngTemplateOutlet]="propListTemplate"
+            [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
+          >
+          </ng-container>
+      }
     </ng-container>
-
-  </ng-container>
-</ng-container>
-
+  } 
+}
 
 <ng-template let-groupedProp="groupedProp" let-data="data" #propListTemplate>
-  <ng-container *ngFor="let prop of groupedProp.formPropList; let first = first; trackBy: track.by('name')">
-    <ng-container *ngIf="prop.visible(data)">
+  @for (prop of groupedProp.formPropList; let first = $first; track prop.name) {
+    @if(prop.visible(data)) {
       <ng-container
         [formGroupName]="extraPropertiesKey"
         *ngIf="extraProperties.controls[prop.name]; else tempDefault"
       >
-        <abp-extensible-form-prop [prop]="prop" [data]="data"
-                                  [class]="prop.className">
+        <abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className">
         </abp-extensible-form-prop>
       </ng-container>
 
@@ -40,6 +42,6 @@
           [first]="first"
         ></abp-extensible-form-prop>
       </ng-template>
-    </ng-container>
-  </ng-container>
+    }
+  }
 </ng-template>