Use new control flow in angular components template.

npm/ng-packs/apps/dev-app/src/app/home/home.component.html

@@ -10,17 +10,18 @@ <h1>{{ '::Welcome' | abpLocalization }}</h1>
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
-    <abp-button
-      *ngIf="!hasLoggedIn"
-      [loading]="loading"
-      (click)="login()"
-      [disabled]="loading"
-      class="px-4 ml-1"
-      role="button"
-      iconClass="fa fa-sign-in"
-    >
-      {{ 'AbpAccount::Login' | abpLocalization }}
-    </abp-button>
+    @if (!hasLoggedIn) {
+      <abp-button
+        [loading]="loading"
+        (click)="login()"
+        [disabled]="loading"
+        class="px-4 ml-1"
+        role="button"
+        iconClass="fa fa-sign-in"
+      >
+        {{ 'AbpAccount::Login' | abpLocalization }}
+      </abp-button>
+    }
   </div>
   <div class="my-3 text-center">
     <h3>Let's improve your application!</h3>
@@ -299,17 +300,14 @@ <h5 class="mb-3">
         {{ context.title }}
       </h5>
       <p [innerHTML]="context.description"></p>
-      <ng-container
-        *ngIf="context.customTemplate"
-        [ngTemplateOutlet]="context.customTemplate"
-      ></ng-container>
-      <a
-        *ngFor="let link of context.links"
-        [href]="link.href"
-        target="_blank"
-        class="btn btn-link px-1"
-        >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
-      ></a>
+      @if (context.customTemplate) {
+        <ng-container [ngTemplateOutlet]="context.customTemplate"></ng-container>
+      }
+      @for (link of context.links; track $index) {
+        <a [href]="link.href" target="_blank" class="btn btn-link px-1"
+          >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
+        ></a>
+      }
     </div>
   </div>
 </ng-template>

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html

@@ -1,18 +1,20 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn" validateOnSubmit class="abp-md-form">
-  <div *ngIf="!hideCurrentPassword" class="mb-3 form-group">
-    <label for="current-password" class="form-label">{{
-      'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization
-    }}</label
-    ><span> * </span
-    ><input
-      type="password"
-      id="current-password"
-      class="form-control"
-      formControlName="password"
-      autofocus
-      autocomplete="current-password"
-    />
-  </div>
+  @if (!hideCurrentPassword) {
+    <div class="mb-3 form-group">
+      <label for="current-password" class="form-label">{{
+        'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization
+      }}</label
+      ><span> * </span
+      ><input
+        type="password"
+        id="current-password"
+        class="form-control"
+        formControlName="password"
+        autofocus
+        autocomplete="current-password"
+      />
+    </div>
+  }
   <div class="mb-3 form-group">
     <label for="new-password" class="form-label">{{
       'AbpIdentity::DisplayName:NewPassword' | abpLocalization

npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html

@@ -1,35 +1,30 @@
 <h4>{{ 'AbpAccount::ForgotPassword' | abpLocalization }}</h4>
 
-<form
-  *ngIf="!isEmailSent; else emailSentTemplate"
-  [formGroup]="form"
-  (ngSubmit)="onSubmit()"
-  validateOnSubmit
->
-  <p>{{ 'AbpAccount::SendPasswordResetLink_Information' | abpLocalization }}</p>
-  <div class="mb-3 form-group">
-    <label for="input-email-address" class="form-label">{{
-      'AbpAccount::EmailAddress' | abpLocalization
-    }}</label
-    ><span> * </span>
-    <input type="email" id="input-email-address" class="form-control" formControlName="email" />
-  </div>
-  <abp-button
-    class="d-block"
-    buttonClass="mt-2 mb-3 btn btn-primary btn-block"
-    [loading]="inProgress"
-    buttonType="submit"
-    [disabled]="form?.invalid"
-  >
-    {{ 'AbpAccount::Submit' | abpLocalization }}
-  </abp-button>
-  <a routerLink="/account/login"
-    ><i class="fa fa-long-arrow-left me-1" aria-hidden="true"></i
-    >{{ 'AbpAccount::Login' | abpLocalization }}</a
-  >
-</form>
-
-<ng-template #emailSentTemplate>
+@if (!isEmailSent) {
+  <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit>
+    <p>{{ 'AbpAccount::SendPasswordResetLink_Information' | abpLocalization }}</p>
+    <div class="mb-3 form-group">
+      <label for="input-email-address" class="form-label">{{
+        'AbpAccount::EmailAddress' | abpLocalization
+      }}</label
+      ><span> * </span>
+      <input type="email" id="input-email-address" class="form-control" formControlName="email" />
+    </div>
+    <abp-button
+      class="d-block"
+      buttonClass="mt-2 mb-3 btn btn-primary btn-block"
+      [loading]="inProgress"
+      buttonType="submit"
+      [disabled]="form?.invalid"
+    >
+      {{ 'AbpAccount::Submit' | abpLocalization }}
+    </abp-button>
+    <a routerLink="/account/login"
+      ><i class="fa fa-long-arrow-left me-1" aria-hidden="true"></i
+      >{{ 'AbpAccount::Login' | abpLocalization }}</a
+    >
+  </form>
+} @else {
   <p>
     {{ 'AbpAccount::PasswordResetMailSentMessage' | abpLocalization }}
   </p>
@@ -40,4 +35,4 @@ <h4>{{ 'AbpAccount::ForgotPassword' | abpLocalization }}</h4>
       {{ 'AbpAccount::BackToLogin' | abpLocalization }}
     </button>
   </a>
-</ng-template>
+}

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

@@ -1,10 +1,12 @@
 <h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
-<strong *ngIf="isSelfRegistrationEnabled">
-  {{ 'AbpAccount::AreYouANewUser' | abpLocalization }}
-  <a class="text-decoration-none" routerLink="/account/register" queryParamsHandling="preserve">{{
-    'AbpAccount::Register' | abpLocalization
-  }}</a>
-</strong>
+@if (isSelfRegistrationEnabled) {
+  <strong>
+    {{ 'AbpAccount::AreYouANewUser' | abpLocalization }}
+    <a class="text-decoration-none" routerLink="/account/register" queryParamsHandling="preserve">{{
+      'AbpAccount::Register' | abpLocalization
+    }}</a>
+  </strong>
+}
 <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
   <div class="mb-3 form-group">
     <label for="login-input-user-name-or-email-address" class="form-label">{{
@@ -20,7 +22,9 @@ <h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
     />
   </div>
   <div class="mb-3 form-group">
-    <label for="login-input-password" class="form-label">{{ 'AbpAccount::Password' | abpLocalization }}</label>
+    <label for="login-input-password" class="form-label">{{
+      'AbpAccount::Password' | abpLocalization
+    }}</label>
     <input
       class="form-control"
       type="password"

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html

@@ -1,22 +1,20 @@
 <div id="AbpContentToolbar"></div>
-<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!(profile$ | async)?.userName" >
+<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!(profile$ | async)?.userName">
   <div class="card-body">
     <div class="row">
       <div class="col-12 col-md-3">
         <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-          <li
-            *ngIf="!hideChangePasswordTab && (profile$ | async)"
-            class="nav-item"
-            (click)="selectedTab = 0"
-          >
-            <a
-              class="nav-link"
-              [ngClass]="{ active: selectedTab === 0 }"
-              role="tab"
-              href="javascript:void(0)"
-              >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
-            >
-          </li>
+          @if (!hideChangePasswordTab && (profile$ | async)) {
+            <li class="nav-item" (click)="selectedTab = 0">
+              <a
+                class="nav-link"
+                [ngClass]="{ active: selectedTab === 0 }"
+                role="tab"
+                href="javascript:void(0)"
+                >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
+              >
+            </li>
+          }
           <li class="nav-item mb-2" (click)="selectedTab = 1">
             <a
               class="nav-link"
@@ -28,34 +26,40 @@
           </li>
         </ul>
       </div>
-      <div *ngIf="profile$ | async" class="col-12 col-md-9">
-        <div class="tab-content" *ngIf="selectedTab === 0" [@fadeIn]>
-          <div class="tab-pane active" role="tabpanel">
-            <h4>
-              {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
-              <hr />
-            </h4>
-            <abp-change-password-form
-              *abpReplaceableTemplate="{
-                componentKey: changePasswordKey
-              }"
-            ></abp-change-password-form>
-          </div>
+      @if (profile$ | async) {
+        <div class="col-12 col-md-9">
+          @if (selectedTab === 0) {
+            <div class="tab-content" [@fadeIn]>
+              <div class="tab-pane active" role="tabpanel">
+                <h4>
+                  {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
+                  <hr />
+                </h4>
+                <abp-change-password-form
+                  *abpReplaceableTemplate="{
+                    componentKey: changePasswordKey
+                  }"
+                ></abp-change-password-form>
+              </div>
+            </div>
+          }
+          @if (selectedTab === 1) {
+            <div class="tab-content" [@fadeIn]>
+              <div class="tab-pane active" role="tabpanel">
+                <h4>
+                  {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
+                  <hr />
+                </h4>
+                <abp-personal-settings-form
+                  *abpReplaceableTemplate="{
+                    componentKey: personalSettingsKey
+                  }"
+                ></abp-personal-settings-form>
+              </div>
+            </div>
+          }
         </div>
-        <div class="tab-content" *ngIf="selectedTab === 1" [@fadeIn]>
-          <div class="tab-pane active" role="tabpanel">
-            <h4>
-              {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
-              <hr />
-            </h4>
-            <abp-personal-settings-form
-              *abpReplaceableTemplate="{
-                componentKey: personalSettingsKey
-              }"
-            ></abp-personal-settings-form>
-          </div>
-        </div>
-      </div>
+      }
     </div>
   </div>
 </div>

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html

@@ -1,12 +1,14 @@
-<form [formGroup]="form"   *ngIf="form"  (ngSubmit)="submit()" validateOnSubmit class="abp-md-form">
-  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-
-  <abp-button
-    buttonType="submit"
-    iconClass="fa fa-check"
-    buttonClass="btn btn-primary color-white"
-    [loading]="inProgress"
-  >
-    {{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-  >
-</form>
+@if (form) {
+  <form [formGroup]="form" (ngSubmit)="submit()" validateOnSubmit class="abp-md-form">
+    <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+
+    <abp-button
+      buttonType="submit"
+      iconClass="fa fa-check"
+      buttonClass="btn btn-primary color-white"
+      [loading]="inProgress"
+    >
+      {{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
+    >
+  </form>
+}