From 295c07c095d373ca188967d0838ef6e87251b0af Mon Sep 17 00:00:00 2001
From: Sinan997 <sinanozturk997@gmail.com>
Date: Mon, 1 Apr 2024 17:13:45 +0300
Subject: [PATCH] use new control flow in `identity`, `permission-management`,
 `tenant-management`,`setting-management`, `theme-basic`, `theme-shared`
 packages

---
 .../lib/components/users/users.component.html |  77 ++++++-----
 .../permission-management.component.html      |  95 +++++++-------
 .../setting-management.component.html         |  10 +-
 .../components/tenants/tenants.component.html |  24 ++--
 .../account-layout.component.html             |  13 +-
 .../auth-wrapper/auth-wrapper.component.html  |  29 ++--
 .../tenant-box/tenant-box.component.html      |   4 +-
 .../application-layout.component.html         |  14 +-
 .../src/lib/components/logo/logo.component.ts |  22 ++--
 .../nav-items/current-user.component.html     | 124 +++++++++---------
 .../nav-items/languages.component.ts          |  60 ++++-----
 .../nav-items/nav-items.component.html        |  24 ++--
 .../page-alert-container.component.html       |  32 ++---
 .../components/routes/routes.component.html   |  47 ++++---
 .../validation-error.component.ts             |   8 +-
 .../breadcrumb-items.component.html           |  29 ++--
 .../components/checkbox/checkbox.component.ts |   8 +-
 .../confirmation/confirmation.component.html  |  89 +++++++------
 .../form-input/form-input.component.ts        |   8 +-
 .../http-error-wrapper.component.html         |  47 ++++---
 .../lib/components/modal/modal.component.html |  40 +++---
 .../toast-container.component.html            |  11 +-
 .../lib/components/toast/toast.component.html |   8 +-
 23 files changed, 432 insertions(+), 391 deletions(-)

diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 7d36566114..5085f1d120 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -26,46 +26,45 @@
     </ng-template>
 
     <ng-template #abpBody>
-      <ng-template #loaderRef>
-        <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
-      </ng-template>
-
-      <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
-        <ul ngbNav #nav="ngbNav" class="nav-tabs">
-          <li ngbNavItem>
-            <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
-            <ng-template ngbNavContent>
-              <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-            </ng-template>
-          </li>
+      @if (form) {
+        <form [formGroup]="form" (ngSubmit)="save()">
+          <ul ngbNav #nav="ngbNav" class="nav-tabs">
+            <li ngbNavItem>
+              <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
+              <ng-template ngbNavContent>
+                <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+              </ng-template>
+            </li>
 
-          <li ngbNavItem>
-            <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
-            <ng-template ngbNavContent>
-              <div
-                *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
-                class="form-check mb-2"
-              >
-                <abp-checkbox
-                  *abpReplaceableTemplate="{
-                    inputs: {
-                      checkboxId: 'roles-' + i,
-                      label: roles[i].name,
-                      formControl: roleGroup.controls[roles[i].name]
-                    },
-                    componentKey: inputKey
-                  }"
-                  [checkboxId]="'roles-' + i"
-                  [formControl]="roleGroup.controls[roles[i].name]"
-                  [label]="roles[i].name"
-                >
-                </abp-checkbox>
-              </div>
-            </ng-template>
-          </li>
-        </ul>
-        <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
-      </form>
+            <li ngbNavItem>
+              <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
+              <ng-template ngbNavContent>
+                @for (roleGroup of roleGroups; track $index; let i = $index) {
+                  <div class="form-check mb-2">
+                    <abp-checkbox
+                      *abpReplaceableTemplate="{
+                        inputs: {
+                          checkboxId: 'roles-' + i,
+                          label: roles[i].name,
+                          formControl: roleGroup.controls[roles[i].name]
+                        },
+                        componentKey: inputKey
+                      }"
+                      [checkboxId]="'roles-' + i"
+                      [formControl]="roleGroup.controls[roles[i].name]"
+                      [label]="roles[i].name"
+                    >
+                    </abp-checkbox>
+                  </div>
+                }
+              </ng-template>
+            </li>
+          </ul>
+          <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
+        </form>
+      } @else {
+        <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
+      }
     </ng-template>
 
     <ng-template #abpFooter>
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index 384070d2e7..19d9f0fa78 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -1,5 +1,5 @@
-<abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' ,scrollable:false }">
-  <ng-container *ngIf="data.entityDisplayName || entityDisplayName">
+<abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg', scrollable: false }">
+  @if (data.entityDisplayName || entityDisplayName) {
     <ng-template #abpHeader>
       <h4>
         {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -
@@ -28,23 +28,28 @@
           <hr class="mt-2 mb-2" />
           <div class="overflow-auto">
             <ul class="nav nav-pills flex-column">
-              <li *ngFor="let group of data.groups; trackBy: trackByFn" class="nav-item">
-                <a
-                  *ngIf="{ assignedCount: getAssignedCount(group.name) } as count"
-                  class="nav-link pointer"
-                  [class.active]="selectedGroup?.name === group?.name"
-                  (click)="onChangeGroup(group)"
-                  (select)="setDisabled(group.permissions)"
-                >
-                  <div [class.font-weight-bold]="count.assignedCount">
-                    {{ group?.displayName }}
-                    <span *ngIf="count.assignedCount > 0">({{ count.assignedCount }})</span>
-                  </div>
-                </a>
-              </li>
+              @for (group of data.groups; track $index) {
+                <li class="nav-item">
+                  @if ({ assignedCount: getAssignedCount(group.name) }; as count) {
+                    <a
+                      class="nav-link pointer"
+                      [class.active]="selectedGroup?.name === group?.name"
+                      (click)="onChangeGroup(group)"
+                      (select)="setDisabled(group.permissions)"
+                    >
+                      <div [class.font-weight-bold]="count.assignedCount">
+                        {{ group?.displayName }}
+                        @if (count.assignedCount > 0) {
+                          <span>({{ count.assignedCount }})</span>
+                        }
+                      </div>
+                    </a>
+                  }
+                </li>
+              }
             </ul>
           </div>
-         </div>
+        </div>
 
         <div class="col-md-8 scroll-in-modal">
           <div class="ps-1">
@@ -64,32 +69,34 @@
               }}</label>
             </div>
             <hr class="my-2" />
-            <div
-              *ngFor="let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn"
-              [ngStyle]="permission.style"
-              class="form-check mb-2"
-            >
-              <input
-                #permissionCheckbox
-                type="checkbox"
-                [checked]="getChecked(permission.name)"
-                [value]="getChecked(permission.name)"
-                [attr.id]="permission.name"
-                class="form-check-input"
-                [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
-                (click)="onClickCheckbox(permission, permissionCheckbox.value)"
-              />
-              <label class="form-check-label" [attr.for]="permission.name"
-                >{{ permission.displayName }}
-                <ng-container *ngIf="!hideBadges">
-                  <span
-                    *ngFor="let provider of permission.grantedProviders"
-                    class="badge bg-light text-dark"
-                    >{{ provider.providerName }}: {{ provider.providerKey }}</span
-                  >
-                </ng-container>
-              </label>
-            </div>
+            @for (permission of selectedGroupPermissions; track $index; let i = $index) {
+              <div
+                [ngStyle]="permission.style"
+                class="form-check mb-2"
+              >
+                <input
+                  #permissionCheckbox
+                  type="checkbox"
+                  [checked]="getChecked(permission.name)"
+                  [value]="getChecked(permission.name)"
+                  [attr.id]="permission.name"
+                  class="form-check-input"
+                  [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
+                  (click)="onClickCheckbox(permission, permissionCheckbox.value)"
+                />
+                <label class="form-check-label" [attr.for]="permission.name"
+                  >{{ permission.displayName }}
+                  @if (!hideBadges) {
+                    @for (provider of permission.grantedProviders; track $index) {
+                      <span
+                        class="badge bg-light text-dark"
+                        >{{ provider.providerName }}: {{ provider.providerKey }}</span
+                      >
+                    }
+                  }
+                </label>
+              </div>
+            }
           </div>
         </div>
       </div>
@@ -102,5 +109,5 @@
         'AbpIdentity::Save' | abpLocalization
       }}</abp-button>
     </ng-template>
-  </ng-container>
+  }
 </abp-modal>
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
index d099de1674..bac95a135c 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
+++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
@@ -23,11 +23,13 @@
             </ul>
           </div>
           <div class="col-12 col-md-9">
-            <div *ngIf="settings.length" class="tab-content">
-              <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
-                <ng-container *ngComponentOutlet="selected.component"></ng-container>
+            @if (settings.length) {
+              <div class="tab-content">
+                <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
+                  <ng-container *ngComponentOutlet="selected.component"></ng-container>
+                </div>
               </div>
-            </div>
+            }
           </div>
         </div>
       </div>
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
index 1be0edefbc..b914bdf15b 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@@ -1,6 +1,4 @@
 <abp-page [title]="'AbpTenantManagement::Tenants' | abpLocalization" [toolbar]="data.items">
-
-
   <div id="wrapper" class="card">
     <div class="card-body">
       <div id="data-tables-table-filter" class="data-tables-filter mb-3">
@@ -26,8 +24,8 @@
     <ng-template #abpHeader>
       <h3>
         {{
-        (selected?.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant')
-          | abpLocalization
+          (selected?.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant')
+            | abpLocalization
         }}
       </h3>
     </ng-template>
@@ -44,20 +42,20 @@
       </button>
       <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="tenantForm?.invalid">{{
         'AbpTenantManagement::Save' | abpLocalization
-        }}</abp-button>
+      }}</abp-button>
     </ng-template>
   </abp-modal>
 
   <abp-feature-management
     *abpReplaceableTemplate="{
-    inputs: {
-      providerName: { value: 'T' },
-      providerKey: { value: providerKey },
-      visible: { value: visibleFeatures, twoWay: true }
-    },
-    outputs: { visibleChange: $any(onVisibleFeaturesChange) },
-    componentKey: featureManagementKey
-  }"
+      inputs: {
+        providerName: { value: 'T' },
+        providerKey: { value: providerKey },
+        visible: { value: visibleFeatures, twoWay: true }
+      },
+      outputs: { visibleChange: $any(onVisibleFeaturesChange) },
+      componentKey: featureManagementKey
+    }"
     [(visible)]="visibleFeatures"
     providerName="T"
     [providerKey]="providerKey"
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html
index 076cf83c7f..a27790c939 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html
@@ -20,12 +20,13 @@
     >
       <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null"></ng-container>
 
-      <div
-        *ngIf="service.smallScreen"
-        [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'"
-      >
-        <ng-container *ngTemplateOutlet="navigations"></ng-container>
-      </div>
+      @if (service.smallScreen) {
+        <div
+          [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'"
+        >
+          <ng-container *ngTemplateOutlet="navigations"></ng-container>
+        </div>
+      }
 
       <ng-template #navigations>
         <abp-routes
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html
index 5a4e2e6039..b32078abe4 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html
@@ -1,27 +1,24 @@
 <div class="row">
   <div class="mx-auto col col-md-5">
-    <ng-container *ngIf="(service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible">
+    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {
       <abp-tenant-box
         *abpReplaceableTemplate="{ componentKey: service.tenantBoxKey }"
       ></abp-tenant-box>
-    </ng-container>
+    }
 
     <div class="abp-account-container">
-      <div
-        *ngIf="service.enableLocalLogin$ | async; else disableLocalLoginTemplate"
-        class="card mt-3 shadow-sm rounded"
-      >
-        <div class="card-body p-5">
-          <ng-content></ng-content>
+      @if (service.enableLocalLogin$ | async) {
+        <div class="card mt-3 shadow-sm rounded">
+          <div class="card-body p-5">
+            <ng-content></ng-content>
+          </div>
         </div>
-      </div>
+      } @else {
+        <div class="alert alert-warning">
+          <strong>{{ 'AbpAccount::InvalidLoginRequest' | abpLocalization }}</strong>
+          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | abpLocalization }}
+        </div>
+      }
     </div>
   </div>
 </div>
-
-<ng-template #disableLocalLoginTemplate>
-  <div class="alert alert-warning">
-    <strong>{{ 'AbpAccount::InvalidLoginRequest' | abpLocalization }}</strong>
-    {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | abpLocalization }}
-  </div>
-</ng-template>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.html
index 9e1466310d..309f4fee83 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="(service.currentTenant$ | async) || { name: '' } as currentTenant">
+@if ((service.currentTenant$ | async) || { name: '' }; as currentTenant) {
   <div class="card shadow-sm rounded mb-3">
     <div class="card-body px-5">
       <div class="row">
@@ -62,4 +62,4 @@
       </abp-button>
     </ng-template>
   </abp-modal>
-</ng-container>
+}
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
index c41cfb3d31..d27bc23ceb 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
@@ -13,12 +13,18 @@
     >
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="navbar-collapse" [class.overflow-hidden]="service.smallScreen" id="main-navbar-collapse">
+    <div
+      class="navbar-collapse"
+      [class.overflow-hidden]="service.smallScreen"
+      id="main-navbar-collapse"
+    >
       <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null"></ng-container>
 
-      <div *ngIf="service.smallScreen" [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'">
-        <ng-container *ngTemplateOutlet="navigations"></ng-container>
-      </div>
+      @if (service.smallScreen) {
+        <div [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'">
+          <ng-container *ngTemplateOutlet="navigations"></ng-container>
+        </div>
+      }
 
       <ng-template #navigations>
         <abp-routes
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
index 95a532435b..68d2c8c065 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
@@ -5,18 +5,18 @@ import { Component } from '@angular/core';
   selector: 'abp-logo',
   template: `
     <a class="navbar-brand" routerLink="/">
-      <img
-        *ngIf="appInfo.logoUrl; else appName"
-        [src]="appInfo.logoUrl"
-        [alt]="appInfo.name"
-        width="100%"
-        height="auto"
-      />
+      @if (appInfo.logoUrl) {
+        <img
+          *ngIf="appInfo.logoUrl"
+          [src]="appInfo.logoUrl"
+          [alt]="appInfo.name"
+          width="100%"
+          height="auto"
+        />
+      } @else {
+        {{ appInfo.name }}
+      }
     </a>
-
-    <ng-template #appName>
-      {{ appInfo.name }}
-    </ng-template>
   `,
 })
 export class LogoComponent {
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html
index 8dab9ea8fd..7837bf5b0a 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html
@@ -1,65 +1,65 @@
-<ng-template #loginBtn>
-  <a role="button" class="nav-link pointer" (click)="navigateToLogin()">{{
-    'AbpAccount::Login' | abpLocalization
-  }}</a>
-</ng-template>
-<div
-  *ngIf="(currentUser$ | async)?.isAuthenticated; else loginBtn"
-  ngbDropdown
-  class="dropdown"
-  #currentUserDropdown="ngbDropdown"
-  display="static"
->
-  <a
-    ngbDropdownToggle
-    class="nav-link"
-    href="javascript:void(0)"
-    role="button"
-    id="dropdownMenuLink"
-    data-toggle="dropdown"
-    aria-haspopup="true"
-    aria-expanded="false"
-  >
-    <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
-      ><i>{{ tenantName }}</i
-      >\</small
-    >
-    <strong>{{ (currentUser$ | async)?.userName }}</strong>
-  </a>
+@if ((currentUser$ | async)?.isAuthenticated) {
   <div
-    class="dropdown-menu dropdown-menu-end border-0 shadow-sm"
-    aria-labelledby="dropdownMenuLink"
-    [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
+    *ngIf="(currentUser$ | async)?.isAuthenticated"
+    ngbDropdown
+    class="dropdown"
+    #currentUserDropdown="ngbDropdown"
+    display="static"
   >
-    <ng-container *ngFor="let item of userMenu.items$ | async; trackBy: trackByFn">
-      <ng-container *abpVisible="!item.visible || item.visible(item)">
-        <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
-          <ng-container
-            *ngIf="item.component; else htmlTemplate"
-            [ngComponentOutlet]="item.component"
-            [ngComponentOutletInjector]="item | toInjector"
-          ></ng-container>
-
-          <ng-template #htmlTemplate>
-            <div
-              *ngIf="item.html; else textTemplate"
-              [innerHTML]="item.html"
-              (click)="item.action ? item.action() : null"
-            ></div>
-          </ng-template>
-
-          <ng-template #textTemplate>
-            <a
-              *ngIf="item.textTemplate"
-              (click)="item.action ? item.action() : null"
-              class="dropdown-item pointer"
-            >
-              <i *ngIf="item.textTemplate.icon" class="me-1 {{ item.textTemplate.icon }}"></i>
-              {{ item.textTemplate.text | abpLocalization }}</a
-            >
-          </ng-template>
-        </li>
-      </ng-container>
-    </ng-container>
+    <a
+      ngbDropdownToggle
+      class="nav-link"
+      href="javascript:void(0)"
+      role="button"
+      id="dropdownMenuLink"
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false"
+    >
+      @if ((selectedTenant$ | async)?.name; as tenantName) {
+        <small
+          ><i>{{ tenantName }}</i
+          >\</small
+        >
+      }
+      <strong>{{ (currentUser$ | async)?.userName }}</strong>
+    </a>
+    <div
+      class="dropdown-menu dropdown-menu-end border-0 shadow-sm"
+      aria-labelledby="dropdownMenuLink"
+      [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
+    >
+      @for (item of userMenu.items$ | async; track $index) {
+        <ng-container *abpVisible="!item.visible || item.visible(item)">
+          <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
+            @if (item.component) {
+              <ng-container
+                [ngComponentOutlet]="item.component"
+                [ngComponentOutletInjector]="item | toInjector"
+              ></ng-container>
+            } @else {
+              @if (item.html) {
+                <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
+              } @else {
+                @if (item.textTemplate) {
+                  <a (click)="item.action ? item.action() : null" class="dropdown-item pointer">
+                    @if (item.textTemplate.icon) {
+                      <i class="me-1 {{ item.textTemplate.icon }}"></i>
+                    }
+                    {{ item.textTemplate.text | abpLocalization }}</a
+                  >
+                }
+              }
+            }
+          </li>
+        </ng-container>
+      }
+    </div>
   </div>
-</div>
+} @else {
+  <ng-template #loginBtn>
+    <a role="button" class="nav-link pointer" (click)="navigateToLogin()">{{
+      'AbpAccount::Login' | abpLocalization
+    }}</a>
+  </ng-template>
+}
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
index 9dd27b28e1..bc98729274 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
@@ -6,39 +6,36 @@ import { map } from 'rxjs/operators';
 @Component({
   selector: 'abp-languages',
   template: `
-    <div
-      *ngIf="((dropdownLanguages$ | async)?.length || 0) > 0"
-      class="dropdown"
-      ngbDropdown
-      #languageDropdown="ngbDropdown"
-      display="static"
-    >
-      <a
-        ngbDropdownToggle
-        class="nav-link"
-        href="javascript:void(0)"
-        role="button"
-        id="dropdownMenuLink"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >
-        {{ defaultLanguage$ | async }}
-      </a>
-      <div
-        class="dropdown-menu dropdown-menu-end border-0 shadow-sm"
-        aria-labelledby="dropdownMenuLink"
-        [class.d-block]="smallScreen && languageDropdown.isOpen()"
-      >
+    @if (((dropdownLanguages$ | async)?.length || 0) > 0) {
+      <div class="dropdown" ngbDropdown #languageDropdown="ngbDropdown" display="static">
         <a
-          *ngFor="let lang of dropdownLanguages$ | async"
+          ngbDropdownToggle
+          class="nav-link"
           href="javascript:void(0)"
-          class="dropdown-item"
-          (click)="onChangeLang(lang.cultureName || '')"
-          >{{ lang?.displayName }}</a
+          role="button"
+          id="dropdownMenuLink"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
         >
+          {{ defaultLanguage$ | async }}
+        </a>
+        <div
+          class="dropdown-menu dropdown-menu-end border-0 shadow-sm"
+          aria-labelledby="dropdownMenuLink"
+          [class.d-block]="smallScreen && languageDropdown.isOpen()"
+        >
+          @for (lang of dropdownLanguages$ | async; track $index) {
+            <a
+              href="javascript:void(0)"
+              class="dropdown-item"
+              (click)="onChangeLang(lang.cultureName || '')"
+              >{{ lang?.displayName }}</a
+            >
+          }
+        </div>
       </div>
-    </div>
+    }
   `,
 })
 export class LanguagesComponent {
@@ -69,7 +66,10 @@ export class LanguagesComponent {
     return this.sessionState.getLanguage();
   }
 
-  constructor(private sessionState: SessionStateService, private configState: ConfigStateService) {}
+  constructor(
+    private sessionState: SessionStateService,
+    private configState: ConfigStateService,
+  ) {}
 
   onChangeLang(cultureName: string) {
     this.sessionState.setLanguage(cultureName);
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
index 67db85efd4..c5e54a62f2 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
@@ -1,18 +1,16 @@
 <ul class="navbar-nav">
-  <ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn">
-    <ng-container  *abpVisible="!item.visible || item.visible(item)">
+  @for (item of navItems.items$ | async; track $index) {
+    <ng-container *abpVisible="!item.visible || item.visible(item)">
       <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
-        <ng-container 
-        
-          *ngIf="item.component; else htmlTemplate" 
-          [ngComponentOutlet]="item.component"
-          [ngComponentOutletInjector]="item | toInjector"
-        ></ng-container>
-        
-        <ng-template #htmlTemplate>
+        @if (item.component) {
+          <ng-container
+            [ngComponentOutlet]="item.component"
+            [ngComponentOutletInjector]="item | toInjector"
+          ></ng-container>
+        } @else {
           <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
-        </ng-template>
+        }
       </li>
     </ng-container>
-  </ng-container>
-</ul>
\ No newline at end of file
+  }
+</ul>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
index 914e803f95..86e9d40177 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
@@ -1,24 +1,26 @@
-<ng-container *ngFor="let alert of service.alerts$ | async; let i = index">
+@for (alert of service.alerts$ | async; track i; let i = $index) {
   <div
     class="alert alert-{{ alert.type }} fade show"
     [ngClass]="{ 'alert-dismissible fade show': alert.dismissible }"
     role="alert"
   >
-    <h4
-      class="alert-heading"
-      *ngIf="alert.title"
-      [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams"
-    ></h4>
+    @if (alert.title) {
+      <h4
+        class="alert-heading"
+        [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams"
+      ></h4>
+    }
     <span
       [innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams"
     ></span>
-    <button
-      *ngIf="alert.dismissible"
-      type="button"
-      class="btn-close"
-      data-dismiss="alert"
-      aria-label="Close"
-      (click)="service.remove(i)"
-    ></button>
+    @if (alert.dismissible) {
+      <button
+        type="button"
+        class="btn-close"
+        data-dismiss="alert"
+        aria-label="Close"
+        (click)="service.remove(i)"
+      ></button>
+    }
   </div>
-</ng-container>
+}
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
index c3a7aa46f4..e537c26f34 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
@@ -1,22 +1,25 @@
 <ul class="navbar-nav">
-  <ng-container
-    *ngFor="let route of routesService.visible$ | async; trackBy: trackByFn"
-    [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
-    [ngTemplateOutletContext]="{ $implicit: route }"
-  >
-  </ng-container>
+  @for (route of routesService.visible$ | async; track $index) {
+    <ng-container
+      [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
+      [ngTemplateOutletContext]="{ $implicit: route }"
+    >
+    </ng-container>
+  }
 
   <ng-template #defaultLink let-route>
     <li class="nav-item" *abpPermission="route.requiredPolicy">
-      <a class="nav-link" [routerLink]="[route.path]"
-        ><i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
-        {{ route.name | abpLocalization }}</a
-      >
+      <a class="nav-link" [routerLink]="[route.path]">
+        @if (route.iconClass) {
+          <i [ngClass]="route.iconClass"></i>
+        }
+        {{ route.name | abpLocalization }}
+      </a>
     </li>
   </ng-template>
 
   <ng-template #dropdownLink let-route>
-    <ng-container *ngIf="route.children?.length">
+    @if (route.children?.length) {
       <li
         class="nav-item dropdown"
         display="static"
@@ -34,7 +37,9 @@
           aria-expanded="false"
           href="javascript:void(0)"
         >
-          <i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
+          @if (route.iconClass) {
+            <i [ngClass]="route.iconClass"></i>
+          }
           {{ route.name | abpLocalization }}
         </a>
         <div
@@ -48,27 +53,29 @@
           ></ng-container>
         </div>
       </li>
-    </ng-container>
+    }
   </ng-template>
 
   <ng-template #forTemplate let-route>
-    <ng-container *ngFor="let child of route.children">
+    @for (child of route.children; track $index) {
       <ng-template
         [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
         [ngTemplateOutletContext]="{ $implicit: child }"
       ></ng-template>
-    </ng-container>
+    }
   </ng-template>
 
   <ng-template #defaultChild let-child>
-    <ng-container *ngIf="child.path">
+    @if (child.path) {
       <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
         <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
-          <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
+          @if (child.iconClass) {
+            <i [ngClass]="child.iconClass"></i>
+          }
           {{ child.name | abpLocalization }}</a
         >
       </div>
-    </ng-container>
+    }
   </ng-template>
 
   <ng-template #dropdownChild let-child>
@@ -87,7 +94,9 @@
           role="button"
           class="btn d-block text-start dropdown-toggle"
         >
-          <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
+          @if (child.iconClass) {
+            <i [ngClass]="child.iconClass"></i>
+          }
           {{ child.name | abpLocalization }}
         </a>
       </div>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts
index e1532ba743..f9a5b8de6d 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts
@@ -4,9 +4,11 @@ import { Validation, ValidationErrorComponent as ErrorComponent } from '@ngx-val
 @Component({
   selector: 'abp-validation-error',
   template: `
-    <div class="invalid-feedback" *ngFor="let error of abpErrors; trackBy: trackByFn">
-      {{ error.message | abpLocalization: error.interpoliteParams }}
-    </div>
+    @for (error of abpErrors; track $index) {
+      <div class="invalid-feedback" >
+        {{ error.message | abpLocalization: error.interpoliteParams }}
+      </div>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
index 598f3638a5..4b2dbf611d 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
@@ -1,18 +1,17 @@
-<ol class="breadcrumb" *ngIf="items.length">
-  <li class="breadcrumb-item">
-    <a routerLink="/"><i class="fa fa-home" aria-hidden="true"></i> </a>
-  </li>
-  <li
-    *ngFor="let item of items; let last = last"
-    class="breadcrumb-item"
-    [class.active]="last"
-    aria-current="page"
-  >
-    <ng-container
-      *ngTemplateOutlet="item.path ? linkTemplate : textTemplate; context: { $implicit: item }"
-    ></ng-container>
-  </li>
-</ol>
+@if (items.length) {
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a routerLink="/"><i class="fa fa-home" aria-hidden="true"></i> </a>
+    </li>
+    @for (item of items; track $index; let last = $last) {
+      <li class="breadcrumb-item" [class.active]="last" aria-current="page">
+        <ng-container
+          *ngTemplateOutlet="item.path ? linkTemplate : textTemplate; context: { $implicit: item }"
+        ></ng-container>
+      </li>
+    }
+  </ol>
+}
 
 <ng-template #linkTemplate let-item>
   <a [routerLink]="item.path"> {{ item.name | abpLocalization }}</a>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
index 89766ce992..9f10b2317f 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
@@ -16,9 +16,11 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
         (blur)="checkboxBlur.next()"
         (focus)="checkboxFocus.next()"
       />
-      <label *ngIf="label" [ngClass]="labelClass" [for]="checkboxId">
-        {{ label | abpLocalization }}
-      </label>
+      @if (label) {
+        <label [ngClass]="labelClass" [for]="checkboxId">
+          {{ label | abpLocalization }}
+        </label>
+      }
     </div>
   `,
   providers: [
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
index 1ec6dcb9be..ef3ce65819 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
@@ -1,42 +1,51 @@
-<div class="confirmation" *ngIf="confirmation$ | async as data">
-  <div
-    class="confirmation-backdrop"
-    (click)="data.options?.dismissible ? close(dismiss) : null"
-  ></div>
-  <div class="confirmation-dialog">
-    <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity || isCustomIconExists(data)">
-      <div  [outerHTML]="data.options.iconTemplate" *ngIf="isIconTemplateExits(data); else iconHolder" ></div>
-       <ng-template #iconHolder>
-         <i class="icon" [ngClass]="getIconClass(data)"></i>
-       </ng-template>
-    </div>
-    <div class="content">
-      <h1
-        class="title"
-        *ngIf="data.title"
-        [innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams"
-      ></h1>
-      <p
-        class="message"
-        *ngIf="data.message"
-        [innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams"
-      ></p>
-    </div>
-    <div class="footer">
-      <button
-        id="cancel"
-        class="btn btn-outline-primary me-2"
-        [innerHTML]="data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization"
-        *ngIf="!data?.options?.hideCancelBtn"
-        (click)="close(reject)"
-      ></button>
-      <button
-        id="confirm"
-        class="btn btn-primary"
-        [innerHTML]="data.options?.yesText || 'AbpUi::Yes' | abpLocalization"
-        *ngIf="!data?.options?.hideYesBtn"
-        (click)="close(confirm)"
-      ></button>
+@if (confirmation$ | async; as data) {
+  <div class="confirmation">
+    <div
+      class="confirmation-backdrop"
+      (click)="data.options?.dismissible ? close(dismiss) : null"
+    ></div>
+    <div class="confirmation-dialog">
+      @if (data.severity || isCustomIconExists(data)) {
+        <div class="icon-container" [ngClass]="data.severity">
+          @if (isIconTemplateExits(data)) {
+            <div [outerHTML]="data.options.iconTemplate"></div>
+          } @else {
+            <i class="icon" [ngClass]="getIconClass(data)"></i>
+          }
+        </div>
+      }
+      <div class="content">
+        @if (data.title) {
+          <h1
+            class="title"
+            [innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams"
+          ></h1>
+        }
+        @if (data.message) {
+          <p
+            class="message"
+            [innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams"
+          ></p>
+        }
+      </div>
+      <div class="footer">
+        @if (!data?.options?.hideCancelBtn) {
+          <button
+            id="cancel"
+            class="btn btn-outline-primary me-2"
+            [innerHTML]="data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization"
+            (click)="close(reject)"
+          ></button>
+        }
+        @if (!data?.options?.hideYesBtn) {
+          <button
+            id="confirm"
+            class="btn btn-primary"
+            [innerHTML]="data.options?.yesText || 'AbpUi::Yes' | abpLocalization"
+            (click)="close(confirm)"
+          ></button>
+        }
+      </div>
     </div>
   </div>
-</div>
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
index d759163a0d..fd5f579b5d 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
@@ -6,9 +6,11 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
   selector: 'abp-form-input',
   template: `
     <div class="mb-3">
-      <label *ngIf="label" [ngClass]="labelClass" [for]="inputId">
-        {{ label | abpLocalization }}
-      </label>
+      @if (label) {
+        <label [ngClass]="labelClass" [for]="inputId">
+          {{ label | abpLocalization }}
+        </label>
+      }
       <input
         type="text"
         [id]="inputId"
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
index cb3adb0e17..34885d1164 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
@@ -4,32 +4,31 @@
   class="error"
   [style.backgroundColor]="backgroundColor"
 >
-  <button
-    *ngIf="!hideCloseIcon"
-    id="abp-close-button"
-    type="button"
-    class="btn-close me-2"
-    (click)="destroy()"
-  ></button>
+  @if (!hideCloseIcon) {
+    <button id="abp-close-button" type="button" class="btn-close me-2" (click)="destroy()"></button>
+  }
 
-  <div *ngIf="!customComponent" class="row centered">
-    <div class="col-md-12">
-      <div class="error-template">
-        <h1>{{ statusText }} {{ title | abpLocalization }}</h1>
-        <div class="error-details">
-          {{ details | abpLocalization }}
-        </div>
-        <div class="error-actions">
-          <a
-            *ngIf="isHomeShow"
-            (click)="destroy()"
-            routerLink="/"
-            class="btn btn-primary btn-md mt-2"
-            ><span class="glyphicon glyphicon-home"></span>
-            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
-          </a>
+  @if (!customComponent) {
+    <div class="row centered">
+      <div class="col-md-12">
+        <div class="error-template">
+          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>
+          <div class="error-details">
+            {{ details | abpLocalization }}
+          </div>
+          <div class="error-actions">
+            @if (isHomeShow) {
+              <a
+                (click)="destroy()"
+                routerLink="/"
+                class="btn btn-primary btn-md mt-2"
+                ><span class="glyphicon glyphicon-home"></span>
+                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
+              </a>
+            }
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  }
 </div>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
index 82c27d2518..cdf6728fca 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
@@ -1,21 +1,27 @@
 <ng-content></ng-content>
 
 <ng-template #modalContent let-modal>
-  <div *ngIf="abpHeader" id="abp-modal-header" class="modal-header abp-modal-header">
-    <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
-    ​
-    <button
-      id="abp-modal-close-button"
-      type="button"
-      class="btn-sm btn-close"
-      aria-label="Close"
-      (click)="modal.dismiss()"
-    ></button>
-  </div>
-  <div *ngIf="abpBody" id="abp-modal-body" class="modal-body">
-    <ng-container *ngTemplateOutlet="abpBody"></ng-container>
-  </div>
-  <div *ngIf="abpFooter" id="abp-modal-footer" class="modal-footer">
-    <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
-  </div>
+  @if (abpHeader) {
+    <div id="abp-modal-header" class="modal-header abp-modal-header">
+      <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
+      ​
+      <button
+        id="abp-modal-close-button"
+        type="button"
+        class="btn-sm btn-close"
+        aria-label="Close"
+        (click)="modal.dismiss()"
+      ></button>
+    </div>
+  }
+  @if (abpBody) {
+    <div id="abp-modal-body" class="modal-body">
+      <ng-container *ngTemplateOutlet="abpBody"></ng-container>
+    </div>
+  }
+  @if (abpFooter) {
+    <div id="abp-modal-footer" class="modal-footer">
+      <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
+    </div>
+  }
 </ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
index a58fecc9e6..70fdaa5ebd 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
@@ -7,9 +7,10 @@
   [style.display]="toasts.length ? 'flex' : 'none'"
   [@toastInOut]="toasts.length"
 >
-  <abp-toast
-    [toast]="toast"
-    *ngFor="let toast of toasts; trackBy: trackByFunc"
-    (remove)="remove($event)"
-  ></abp-toast>
+  @for (toast of toasts; track toast.options?.id) {
+    <abp-toast
+      [toast]="toast"
+      (remove)="remove($event)"
+    ></abp-toast>
+  }
 </div>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
index 5e6902ed27..0f123fdadd 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
@@ -3,9 +3,11 @@
     <i class="fa icon" [ngClass]="iconClass" aria-hidden="true"></i>
   </div>
   <div class="abp-toast-content">
-    <button class="abp-toast-close-button" (click)="close()" *ngIf="toast.options?.closable">
-      <i class="fa fa-times" aria-hidden="true"></i>
-    </button>
+    @if (toast.options?.closable) {
+      <button class="abp-toast-close-button" (click)="close()">
+        <i class="fa fa-times" aria-hidden="true"></i>
+      </button>
+    }
     <div class="abp-toast-title">
       {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}
     </div>