diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
index c419da1b6f..452ac38d09 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -1,4 +1,171 @@
-<ng-container
+<ng-container *abpPermission="prop.permission; runChangeDetection: false">
+  @switch (getComponent(prop)) {
+    @case ('template') {
+      <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent">
+      </ng-container>
+    }
+  }
+
+  <div [ngClass]="containerClassName" class="mb-2">
+    @switch (getComponent(prop)) {
+      @case ('input') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <input
+          #field
+          [id]="prop.id"
+          [formControlName]="prop.name"
+          [autocomplete]="prop.autocomplete"
+          [type]="getType(prop)"
+          [abpDisabled]="disabled"
+          [readonly]="readonly"
+          class="form-control"
+        />
+      }
+
+      @case ('hidden') {
+        <input [formControlName]="prop.name" type="hidden" />
+      }
+
+      @case ('checkbox') {
+        <div class="form-check" validationTarget>
+          <input
+            #field
+            [id]="prop.id"
+            [formControlName]="prop.name"
+            [abpDisabled]="disabled"
+            type="checkbox"
+            class="form-check-input"
+          />
+          <ng-template
+            [ngTemplateOutlet]="label"
+            [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }"
+          ></ng-template>
+        </div>
+      }
+
+      @case ('select') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <select
+          #field
+          [id]="prop.id"
+          [formControlName]="prop.name"
+          [abpDisabled]="disabled"
+          class="form-select form-control"
+        >
+          @for (option of options$ | async; track option.value) {
+            <option [ngValue]="option.value">
+              {{ option.key }}
+            </option>
+          }
+        </select>
+      }
+
+      @case ('multiselect') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <select
+          #field
+          [id]="prop.id"
+          [formControlName]="prop.name"
+          [abpDisabled]="disabled"
+          multiple="multiple"
+          class="form-select form-control"
+        >
+          @for (options of options$ | asnyc; track option.value) {
+            <option [ngValue]="option.value">
+              {{ option.key }}
+            </option>
+          }
+        </select>
+      }
+
+      @case ('typeahead') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <div #typeahead class="position-relative" validationStyle validationTarget>
+          <input
+            #field
+            [id]="prop.id"
+            [autocomplete]="prop.autocomplete"
+            [abpDisabled]="disabled"
+            [ngbTypeahead]="search"
+            [editable]="false"
+            [inputFormatter]="typeaheadFormatter"
+            [resultFormatter]="typeaheadFormatter"
+            [ngModelOptions]="{ standalone: true }"
+            [(ngModel)]="typeaheadModel"
+            (selectItem)="setTypeaheadValue($event.item)"
+            (blur)="setTypeaheadValue(typeaheadModel)"
+            [class.is-invalid]="typeahead.classList.contains('is-invalid')"
+            class="form-control"
+          />
+          <input [formControlName]="prop.name" type="hidden" />
+        </div>
+      }
+
+      @case ('date') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <input
+          [id]="prop.id"
+          [formControlName]="prop.name"
+          (click)="datepicker.open()"
+          (keyup.space)="datepicker.open()"
+          ngbDatepicker
+          #datepicker="ngbDatepicker"
+          type="text"
+          class="form-control"
+        />
+      }
+      @case ('time') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <ngb-timepicker [formControlName]="prop.name"></ngb-timepicker>
+      }
+
+      @case ('dateTime') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
+      }
+
+      @case ('textarea') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <textarea
+          #field
+          [id]="prop.id"
+          [formControlName]="prop.name"
+          [abpDisabled]="disabled"
+          [readonly]="readonly"
+          class="form-control"
+        ></textarea>
+      }
+
+      @case ('passwordinputgroup') {
+        <ng-template [ngTemplateOutlet]="label"></ng-template>
+        <div class="input-group form-group" validationTarget>
+          <input
+            class="form-control"
+            [id]="prop.id"
+            [formControlName]="prop.name"
+            [abpShowPassword]="showPassword"
+          />
+          <button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword">
+            <i
+              class="fa"
+              aria-hidden="true"
+              [ngClass]="{
+                'fa-eye-slash': !showPassword,
+                'fa-eye': showPassword
+              }"
+            ></i>
+          </button>
+        </div>
+      }
+    }
+
+    @if (prop.formText) {
+      <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
+    }
+  </div>
+</ng-container>
+
+<!-- <ng-container
   [ngSwitch]="getComponent(prop)"
   *abpPermission="prop.permission; runChangeDetection: false"
 >
@@ -163,7 +330,7 @@
       <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
     }
   </div>
-</ng-container>
+</ng-container> -->
 
 <ng-template #label let-classes>
   <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'">
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
index a3324960e0..f1bc85ac3d 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
@@ -1,145 +1,161 @@
-<abp-modal *ngIf="visible" [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
-  <ng-template #abpHeader>
-    <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>
-  </ng-template>
+@if (visible) {
+  <abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
+    <ng-template #abpHeader>
+      <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>
+    </ng-template>
 
-  <ng-template #abpBody>
-    <div class="row">
-      <ng-container *ngIf="groups.length">
-        <div class="col-md-4">
-          <ul
-            ngbNav
-            #nav="ngbNav"
-            [(activeId)]="selectedGroupDisplayName"
-            class="nav-pills"
-            orientation="vertical"
-          >
-            <li
-              *ngFor="let group of groups; trackBy: track.by('name')"
-              [ngbNavItem]="group.displayName"
+    <ng-template #abpBody>
+      <div class="row">
+        @if (groups.length) {
+          <div class="col-md-4">
+            <ul
+              ngbNav
+              #nav="ngbNav"
+              [(activeId)]="selectedGroupDisplayName"
+              class="nav-pills"
+              orientation="vertical"
             >
-              <a ngbNavLink>{{ group.displayName }}</a>
-              <ng-template ngbNavContent>
-                <h4>{{ selectedGroupDisplayName }}</h4>
-                <hr class="mt-2 mb-3" />
+              @for (group of groups; track group.name) {
+                <li [ngbNavItem]="group.displayName">
+                  <a ngbNavLink>{{ group.displayName }}</a>
+                  <ng-template ngbNavContent>
+                    <h4>{{ selectedGroupDisplayName }}</h4>
+                    <hr class="mt-2 mb-3" />
 
-                <div
-                  class="mt-2"
-                  *ngFor="
-                    let feature of features[group.name];
-                    let i = index;
-                    trackBy: track.by('id')
-                  "
-                  [ngStyle]="feature.style"
-                  [ngSwitch]="feature.valueType?.name"
-                  (keyup.enter)="save()"
-                >
-                  <ng-container *ngSwitchCase="valueTypes.ToggleStringValueType">
-                    <div class="form-check">
-                      <input
-                        class="form-check-input"
-                        type="checkbox"
-                        [id]="feature.name"
-                        [(ngModel)]="feature.value"
-                        (ngModelChange)="onCheckboxClick($event, feature)"
-                      />
+                    @for (feature of features[group.name]; track feature.id; let i = $index) {
+                      <div class="mt-2" [ngStyle]="feature.style" (keyup.enter)="save()">
+                        @switch (feature.valueType?.name) {
+                          @case (valueTypes.ToggleStringValueType) {
+                            <div class="form-check">
+                              <input
+                                class="form-check-input"
+                                type="checkbox"
+                                [id]="feature.name"
+                                [(ngModel)]="feature.value"
+                                (ngModelChange)="onCheckboxClick($event, feature)"
+                              />
 
-                      <label class="form-check-label" [htmlFor]="feature.name">{{
-                        feature.displayName
-                      }}</label>
-                      <ng-container
-                        *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
-                      ></ng-container>
-                    </div>
-                  </ng-container>
-                  <ng-container *ngSwitchCase="valueTypes.FreeTextStringValueType">
-                    <div class="mb-3 form-group">
-                      <label [htmlFor]="feature.name" class="form-label">{{
-                        feature.displayName
-                      }}</label>
-                      <input
-                        class="form-control"
-                        type="text"
-                        [id]="feature.name"
-                        [(ngModel)]="feature.value"
-                        [abpFeatureManagementFreeText]="feature"
-                      />
+                              <label class="form-check-label" [htmlFor]="feature.name">{{
+                                feature.displayName
+                              }}</label>
+                              <ng-container
+                                *ngTemplateOutlet="
+                                  descTmp;
+                                  context: { $implicit: feature.description }
+                                "
+                              ></ng-container>
+                            </div>
+                          }
+                          @case (valueTypes.FreeTextStringValueType) {
+                            <div class="mb-3 form-group">
+                              <label [htmlFor]="feature.name" class="form-label">{{
+                                feature.displayName
+                              }}</label>
+                              <input
+                                class="form-control"
+                                type="text"
+                                [id]="feature.name"
+                                [(ngModel)]="feature.value"
+                                [abpFeatureManagementFreeText]="feature"
+                              />
 
-                      <ng-container
-                        *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
-                      ></ng-container>
-                    </div>
-                  </ng-container>
-                  <ng-container *ngSwitchCase="valueTypes.SelectionStringValueType">
-                    <ng-container *ngIf="feature.valueType.itemSource?.items?.length">
-                      <div class="mb-3 form-group">
-                        <label [htmlFor]="feature.name" class="form-label">{{
-                          feature.displayName
-                        }}</label>
-                        <select class="form-select" [id]="feature.name" [(ngModel)]="feature.value">
-                          <option
-                            *ngFor="
-                              let item of feature.valueType.itemSource?.items;
-                              trackBy: track.by('value')
-                            "
-                            [ngValue]="item.value"
-                          >
-                            {{
-                              item.displayText?.resourceName + '::' + item.displayText?.name
-                                | abpLocalization
-                            }}
-                          </option>
-                        </select>
-                        <ng-container
-                          *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
-                        ></ng-container>
+                              <ng-container
+                                *ngTemplateOutlet="
+                                  descTmp;
+                                  context: { $implicit: feature.description }
+                                "
+                              ></ng-container>
+                            </div>
+                          }
+                          @case (valueTypes.SelectionStringValueType) {
+                            @if (feature.valueType.itemSource?.items?.length) {
+                                <div class="mb-3 form-group">
+                                  <label [htmlFor]="feature.name" class="form-label">{{
+                                    feature.displayName
+                                  }}</label>
+                                  <select
+                                    class="form-select"
+                                    [id]="feature.name"
+                                    [(ngModel)]="feature.value"
+                                  >
+                                    @for (
+                                      item of feature.valueType.itemSource?.items;
+                                      track item.value
+                                    ) {
+                                      <option [ngValue]="item.value">
+                                        {{
+                                          item.displayText?.resourceName +
+                                            '::' +
+                                            item.displayText?.name | abpLocalization
+                                        }}
+                                      </option>
+                                    }
+                                  </select>
+                                  <ng-container
+                                    *ngTemplateOutlet="
+                                      descTmp;
+                                      context: { $implicit: feature.description }
+                                    "
+                                  ></ng-container>
+                                </div>
+                            }
+                          }
+                          @default {
+                            {{ feature.displayName }}
+                          }
+                        }
                       </div>
-                    </ng-container>
-                  </ng-container>
-                  <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>
-                </div>
-              </ng-template>
-            </li>
-          </ul>
-        </div>
+                    }
+                  </ng-template>
+                </li>
+              }
+            </ul>
+          </div>
 
-        <ng-template #descTmp let-description>
-          <small *ngIf="description" class="d-block form-text text-muted">{{ description }}</small>
-        </ng-template>
+          <ng-template #descTmp let-description>
+            @if (description) {
+              <small class="d-block form-text text-muted">{{ description }}</small>
+            }
+          </ng-template>
 
-        <div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div>
-      </ng-container>
+          <div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div>
+        }
 
-      <div class="col" *ngIf="!groups.length">
-        {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
+        @if (!groups.length) {
+          <div class="col">
+            {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
+          </div>
+        }
       </div>
-    </div>
-  </ng-template>
+    </ng-template>
 
-  <ng-template #abpFooter>
-    <button abpClose type="button" class="btn btn-link">
-      {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
-    </button>
+    <ng-template #abpFooter>
+      <button abpClose type="button" class="btn btn-link">
+        {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
+      </button>
 
-    <abp-button
-      *ngIf="groups.length"
-      iconClass="fa fa-refresh"
-      buttonClass="btn btn-outline-primary"
-      [disabled]="modalBusy"
-      (click)="resetToDefault()"
-      aria-hidden="true"
-    >
-      {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
-    </abp-button>
+      @if (groups.length) {
+        <abp-button
+          iconClass="fa fa-refresh"
+          buttonClass="btn btn-outline-primary"
+          [disabled]="modalBusy"
+          (click)="resetToDefault()"
+          aria-hidden="true"
+        >
+          {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
+        </abp-button>
+      }
 
-    <abp-button
-      *ngIf="groups.length"
-      iconClass="fa fa-check"
-      [disabled]="modalBusy"
-      (click)="save()"
-      aria-hidden="true"
-    >
-      {{ 'AbpFeatureManagement::Save' | abpLocalization }}
-    </abp-button>
-  </ng-template>
-</abp-modal>
+      @if (groups.length) {
+        <abp-button
+          iconClass="fa fa-check"
+          [disabled]="modalBusy"
+          (click)="save()"
+          aria-hidden="true"
+        >
+          {{ 'AbpFeatureManagement::Save' | abpLocalization }}
+        </abp-button>
+      }
+    </ng-template>
+  </abp-modal>
+}