use new control flow in `components` package

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -1,4 +1,7 @@
-<ng-container [ngSwitch]="getComponent(prop)" *abpPermission="prop.permission; runChangeDetection: false">
+<ng-container
+  [ngSwitch]="getComponent(prop)"
+  *abpPermission="prop.permission; runChangeDetection: false"
+>
   <ng-template ngSwitchCase="template">
     <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent">
     </ng-container>
@@ -50,9 +53,7 @@
         class="form-select form-control"
       >
         @for (option of options$ | async; track option.value) {
-          <option
+          <option [ngValue]="option.value">
-            [ngValue]="option.value"
-          >
             {{ option.key }}
           </option>
         }
@@ -69,12 +70,11 @@
         multiple="multiple"
         class="form-select form-control"
       >
-        <option
+        @for (options of options$ | asnyc; track option.value) {
-          *ngFor="let option of options$ | async; trackBy: track.by('value')"
+          <option [ngValue]="option.value">
-          [ngValue]="option.value"
+            {{ option.key }}
-        >
+          </option>
-          {{ option.key }}
+        }
-        </option>
       </select>
     </ng-template>
 
@@ -160,9 +160,7 @@
     </ng-template>
 
     @if (prop.formText) {
-    <small class="text-muted d-block">{{
+      <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
-      prop.formText | abpLocalization
-    }}</small>
     }
   </div>
 </ng-container>
@@ -171,12 +169,17 @@
   <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'">
     @if (prop.displayTextResolver) {
       {{ prop.displayTextResolver(data) | abpLocalization }}
-    }@else{
+    } @else {
       {{ prop.displayName | abpLocalization }}
     }
     {{ asterisk }}
     @if (prop.tooltip) {
-      <i [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"  container="body" class="bi bi-info-circle"></i>
+      <i
+        [ngbTooltip]="prop.tooltip.text | abpLocalization"
+        [placement]="prop.tooltip.placement || 'auto'"
+        container="body"
+        class="bi bi-info-circle"
+      ></i>
     }
   </label>
 </ng-template>

npm/ng-packs/packages/components/page/src/page.component.html

@@ -1,41 +1,37 @@
-<div class="row entry-row" *ngIf="shouldRenderRow">
+@if (shouldRenderRow) {
-  <ng-container *ngIf="customTitle; else defaultTitleTemplate">
+  <div class="row entry-row">
-    <ng-content select="abp-page-title-container"></ng-content>
+    @if (customTitle) {
-  </ng-container>
+      <ng-content select="abp-page-title-container"></ng-content>
+    } @else {
+      @if (title) {
+        <div class="col-auto" *abpPagePart="pageParts.title">
+          <h1 class="content-header-title">
+            {{ title }}
+          </h1>
+        </div>
+      }
+    }
 
-  <ng-container *ngIf="customBreadcrumb; else defaultBreadcrumbTemplate">
+    @if (customBreadcrumb) {
-    <ng-content select="abp-page-breadcrumb-container"></ng-content>
+      <ng-content select="abp-page-breadcrumb-container"></ng-content>
-  </ng-container>
+    } @else {
+      @if (breadcrumb) {
+        <div class="col-lg-auto ps-lg-0" *abpPagePart="pageParts.breadcrumb">
+          <abp-breadcrumb></abp-breadcrumb>
+        </div>
+      }
+    }
 
-  <ng-container *ngIf="customToolbar; else defaultPageToolbarTemplate">
+    @if (customToolbar) {
-    <ng-content select="abp-page-toolbar-container"></ng-content>
+      <ng-content select="abp-page-toolbar-container"></ng-content>
-  </ng-container>
+    } @else {
-</div>
+      @if (toolbarVisible) {
+        <div class="col" *abpPagePart="pageParts.toolbar; context: toolbarData">
+          <abp-page-toolbar [record]="toolbarData"></abp-page-toolbar>
+        </div>
+      }
+    }
+  </div>
+}
 
 <ng-content></ng-content>
-
-<ng-template #defaultTitleTemplate>
-  <ng-container *ngIf="title">
-    <div class="col-auto" *abpPagePart="pageParts.title">
-      <h1 class="content-header-title">
-        {{ title }}
-      </h1>
-    </div>
-  </ng-container>
-</ng-template>
-
-<ng-template #defaultBreadcrumbTemplate>
-  <ng-container *ngIf="breadcrumb">
-    <div class="col-lg-auto ps-lg-0" *abpPagePart="pageParts.breadcrumb">
-      <abp-breadcrumb></abp-breadcrumb>
-    </div>
-  </ng-container>
-</ng-template>
-
-<ng-template #defaultPageToolbarTemplate>
-  <ng-container *ngIf="toolbarVisible">
-    <div class="col" *abpPagePart="pageParts.toolbar; context: toolbarData">
-      <abp-page-toolbar [record]="toolbarData"></abp-page-toolbar>
-    </div>
-  </ng-container>
-</ng-template>

npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html

@@ -32,25 +32,26 @@
         ></ng-container>
       </div>
 
-      <div
+      @if (menu) {
-        #dropdown="ngbDropdown"
+        <div
-        *ngIf="menu"
+          #dropdown="ngbDropdown"
-        class="d-inline-block ms-1"
+          class="d-inline-block ms-1"
-        ngbDropdown
+          ngbDropdown
-        placement="bottom"
+          placement="bottom"
-        container="body"
+          container="body"
-        (abpInit)="initDropdown(node.key, dropdown)"
+          (abpInit)="initDropdown(node.key, dropdown)"
-      >
+        >
-        <i
+          <i
-          class="fas fa-caret-down text-muted"
+            class="fas fa-caret-down text-muted"
-          ngbDropdownToggle
+            ngbDropdownToggle
-          [class.dropdown-toggle]="false"
+            [class.dropdown-toggle]="false"
-          aria-hidden="true"
+            aria-hidden="true"
-        ></i>
+          ></i>
-        <div ngbDropdownMenu>
+          <div ngbDropdownMenu>
-          <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
+            <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
+          </div>
         </div>
-      </div>
+      }
     </ng-template>
 
     <ng-template #defaultNodeTemplate let-node>