From b083fd3ebb2b7cb9ad14feccadfb912e38a477ce Mon Sep 17 00:00:00 2001
From: Sercan Yemen <117369+srcn@users.noreply.github.com>
Date: Mon, 3 Jun 2024 09:19:47 +0300
Subject: [PATCH] First pass on the new control flow syntax migration

---
 .../components/alert/alert.component.html     | 171 ++++++++++--------
 src/@fuse/components/alert/alert.component.ts |   4 +-
 src/@fuse/components/card/card.component.html |  16 +-
 src/@fuse/components/card/card.component.ts   |   4 +-
 .../loading-bar/loading-bar.component.html    |   4 +-
 .../loading-bar/loading-bar.component.ts      |   4 +-
 .../components/basic/basic.component.html     |  64 +++----
 .../components/basic/basic.component.ts       |   3 +-
 .../components/branch/branch.component.html   |  52 +++---
 .../components/branch/branch.component.ts     |   4 +-
 .../horizontal/horizontal.component.html      |  32 ++--
 .../horizontal/horizontal.component.ts        |   3 -
 .../components/aside/aside.component.html     |  48 +++--
 .../components/aside/aside.component.ts       |   4 +-
 .../components/basic/basic.component.html     |  64 +++----
 .../components/basic/basic.component.ts       |   3 +-
 .../collapsable/collapsable.component.html    | 106 ++++++-----
 .../collapsable/collapsable.component.ts      |   4 +-
 .../components/group/group.component.html     |  40 ++--
 .../components/group/group.component.ts       |   4 +-
 .../vertical/vertical.component.html          |  60 +++---
 .../navigation/vertical/vertical.component.ts |   4 +-
 .../confirmation/dialog/dialog.component.html |  34 ++--
 .../confirmation/dialog/dialog.component.ts   |   4 +-
 24 files changed, 341 insertions(+), 395 deletions(-)

diff --git a/src/@fuse/components/alert/alert.component.html b/src/@fuse/components/alert/alert.component.html
index 5c234dd0..0d512055 100644
--- a/src/@fuse/components/alert/alert.component.html
+++ b/src/@fuse/components/alert/alert.component.html
@@ -1,80 +1,93 @@
-<div
-    class="fuse-alert-container"
-    *ngIf="!dismissible || (dismissible && !dismissed)"
-    [@fadeIn]="!dismissed"
-    [@fadeOut]="!dismissed"
->
-    <!-- Border -->
-    <div class="fuse-alert-border" *ngIf="appearance === 'border'"></div>
-
-    <!-- Icon -->
-    <div class="fuse-alert-icon" *ngIf="showIcon">
-        <!-- Custom icon -->
-        <div class="fuse-alert-custom-icon">
-            <ng-content select="[fuseAlertIcon]"></ng-content>
-        </div>
-
-        <!-- Default icons -->
-        <div class="fuse-alert-default-icon">
-            <mat-icon
-                *ngIf="type === 'primary'"
-                [svgIcon]="'heroicons_solid:check-circle'"
-            ></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'accent'"
-                [svgIcon]="'heroicons_solid:check-circle'"
-            ></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'warn'"
-                [svgIcon]="'heroicons_solid:x-circle'"
-            ></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'basic'"
-                [svgIcon]="'heroicons_solid:check-circle'"
-            ></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'info'"
-                [svgIcon]="'heroicons_solid:information-circle'"
-            ></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'success'"
-                [svgIcon]="'heroicons_solid:check-circle'"
-            ></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'warning'"
-                [svgIcon]="'heroicons_solid:exclamation-triangle'"
-            ></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'error'"
-                [svgIcon]="'heroicons_solid:x-circle'"
-            ></mat-icon>
-        </div>
-    </div>
-
-    <!-- Content -->
-    <div class="fuse-alert-content">
-        <div class="fuse-alert-title">
-            <ng-content select="[fuseAlertTitle]"></ng-content>
-        </div>
-
-        <div class="fuse-alert-message">
-            <ng-content></ng-content>
-        </div>
-    </div>
-
-    <!-- Dismiss button -->
-    <button
-        class="fuse-alert-dismiss-button"
-        mat-icon-button
-        (click)="dismiss()"
+@if (!dismissible || (dismissible && !dismissed)) {
+    <div
+        class="fuse-alert-container"
+        [@fadeIn]="!dismissed"
+        [@fadeOut]="!dismissed"
     >
-        <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
-    </button>
-</div>
+        <!-- Border -->
+        @if (appearance === 'border') {
+            <div class="fuse-alert-border"></div>
+        }
+
+        <!-- Icon -->
+        @if (showIcon) {
+            <div class="fuse-alert-icon">
+                <!-- Custom icon -->
+                <div class="fuse-alert-custom-icon">
+                    <ng-content select="[fuseAlertIcon]"></ng-content>
+                </div>
+
+                <!-- Default icons -->
+                <div class="fuse-alert-default-icon">
+                    @if (type === 'primary') {
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:check-circle'"
+                        ></mat-icon>
+                    }
+
+                    @if (type === 'accent') {
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:check-circle'"
+                        ></mat-icon>
+                    }
+
+                    @if (type === 'warn') {
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:x-circle'"
+                        ></mat-icon>
+                    }
+
+                    @if (type === 'basic') {
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:check-circle'"
+                        ></mat-icon>
+                    }
+
+                    @if (type === 'info') {
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:information-circle'"
+                        ></mat-icon>
+                    }
+
+                    @if (type === 'success') {
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:check-circle'"
+                        ></mat-icon>
+                    }
+
+                    @if (type === 'warning') {
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:exclamation-triangle'"
+                        ></mat-icon>
+                    }
+
+                    @if (type === 'error') {
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:x-circle'"
+                        ></mat-icon>
+                    }
+                </div>
+            </div>
+        }
+
+        <!-- Content -->
+        <div class="fuse-alert-content">
+            <div class="fuse-alert-title">
+                <ng-content select="[fuseAlertTitle]"></ng-content>
+            </div>
+
+            <div class="fuse-alert-message">
+                <ng-content></ng-content>
+            </div>
+        </div>
+
+        <!-- Dismiss button -->
+        <button
+            class="fuse-alert-dismiss-button"
+            mat-icon-button
+            (click)="dismiss()"
+        >
+            <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
+        </button>
+    </div>
+}
diff --git a/src/@fuse/components/alert/alert.component.ts b/src/@fuse/components/alert/alert.component.ts
index 8b742df8..7c6d2c21 100644
--- a/src/@fuse/components/alert/alert.component.ts
+++ b/src/@fuse/components/alert/alert.component.ts
@@ -1,5 +1,5 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgIf } from '@angular/common';
+
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -35,7 +35,7 @@ import { Subject, filter, takeUntil } from 'rxjs';
     animations: fuseAnimations,
     exportAs: 'fuseAlert',
     standalone: true,
-    imports: [NgIf, MatIconModule, MatButtonModule],
+    imports: [MatIconModule, MatButtonModule],
 })
 export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
     /* eslint-disable @typescript-eslint/naming-convention */
diff --git a/src/@fuse/components/card/card.component.html b/src/@fuse/components/card/card.component.html
index 76e4ff07..94e8e77a 100644
--- a/src/@fuse/components/card/card.component.html
+++ b/src/@fuse/components/card/card.component.html
@@ -1,5 +1,5 @@
 <!-- Flippable card -->
-<ng-container *ngIf="flippable">
+@if (flippable) {
     <!-- Front -->
     <div class="fuse-card-front">
         <ng-content select="[fuseCardFront]"></ng-content>
@@ -9,15 +9,17 @@
     <div class="fuse-card-back">
         <ng-content select="[fuseCardBack]"></ng-content>
     </div>
-</ng-container>
+}
 
 <!-- Normal card -->
-<ng-container *ngIf="!flippable">
+@if (!flippable) {
     <!-- Content -->
     <ng-content></ng-content>
 
     <!-- Expansion -->
-    <div class="fuse-card-expansion" *ngIf="expanded" [@expandCollapse]>
-        <ng-content select="[fuseCardExpansion]"></ng-content>
-    </div>
-</ng-container>
+    @if (expanded) {
+        <div class="fuse-card-expansion" [@expandCollapse]>
+            <ng-content select="[fuseCardExpansion]"></ng-content>
+        </div>
+    }
+}
diff --git a/src/@fuse/components/card/card.component.ts b/src/@fuse/components/card/card.component.ts
index 9eedb4be..f1eacce7 100644
--- a/src/@fuse/components/card/card.component.ts
+++ b/src/@fuse/components/card/card.component.ts
@@ -1,5 +1,5 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgIf } from '@angular/common';
+
 import {
     Component,
     HostBinding,
@@ -19,7 +19,7 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
     animations: fuseAnimations,
     exportAs: 'fuseCard',
     standalone: true,
-    imports: [NgIf],
+    imports: [],
 })
 export class FuseCardComponent implements OnChanges {
     /* eslint-disable @typescript-eslint/naming-convention */
diff --git a/src/@fuse/components/loading-bar/loading-bar.component.html b/src/@fuse/components/loading-bar/loading-bar.component.html
index 0ecb7763..05003422 100644
--- a/src/@fuse/components/loading-bar/loading-bar.component.html
+++ b/src/@fuse/components/loading-bar/loading-bar.component.html
@@ -1,3 +1,3 @@
-<ng-container *ngIf="show">
+@if (show) {
     <mat-progress-bar [mode]="mode" [value]="progress"></mat-progress-bar>
-</ng-container>
+}
diff --git a/src/@fuse/components/loading-bar/loading-bar.component.ts b/src/@fuse/components/loading-bar/loading-bar.component.ts
index 59a16159..daaa6ade 100644
--- a/src/@fuse/components/loading-bar/loading-bar.component.ts
+++ b/src/@fuse/components/loading-bar/loading-bar.component.ts
@@ -1,5 +1,5 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgIf } from '@angular/common';
+
 import {
     Component,
     inject,
@@ -21,7 +21,7 @@ import { Subject, takeUntil } from 'rxjs';
     encapsulation: ViewEncapsulation.None,
     exportAs: 'fuseLoadingBar',
     standalone: true,
-    imports: [NgIf, MatProgressBarModule],
+    imports: [MatProgressBarModule],
 })
 export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy {
     private _fuseLoadingService = inject(FuseLoadingService);
diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
index bc7a1dc6..6dd4dd9c 100644
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
@@ -5,15 +5,11 @@
     [ngClass]="item.classes?.wrapper"
 >
     <!-- Item with an internal link -->
-    <ng-container
-        *ngIf="
-            item.link && !item.externalLink && !item.function && !item.disabled
-        "
-    >
+    @if (item.link && !item.externalLink && !item.function && !item.disabled) {
         <div
             class="fuse-horizontal-navigation-item"
             [ngClass]="{
-                'fuse-horizontal-navigation-item-active-forced': item.active
+                'fuse-horizontal-navigation-item-active-forced': item.active,
             }"
             [routerLink]="[item.link]"
             [fragment]="item.fragment ?? null"
@@ -26,14 +22,10 @@
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
-    </ng-container>
+    }
 
     <!-- Item with an external link -->
-    <ng-container
-        *ngIf="
-            item.link && item.externalLink && !item.function && !item.disabled
-        "
-    >
+    @if (item.link && item.externalLink && !item.function && !item.disabled) {
         <a
             class="fuse-horizontal-navigation-item"
             [href]="item.link"
@@ -42,32 +34,28 @@
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
-    </ng-container>
+    }
 
     <!-- Item with a function -->
-    <ng-container *ngIf="!item.link && item.function && !item.disabled">
+    @if (!item.link && item.function && !item.disabled) {
         <div
             class="fuse-horizontal-navigation-item"
             [ngClass]="{
-                'fuse-horizontal-navigation-item-active-forced': item.active
+                'fuse-horizontal-navigation-item-active-forced': item.active,
             }"
             [matTooltip]="item.tooltip || ''"
             (click)="item.function(item)"
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
-    </ng-container>
+    }
 
     <!-- Item with an internal link and function -->
-    <ng-container
-        *ngIf="
-            item.link && !item.externalLink && item.function && !item.disabled
-        "
-    >
+    @if (item.link && !item.externalLink && item.function && !item.disabled) {
         <div
             class="fuse-horizontal-navigation-item"
             [ngClass]="{
-                'fuse-horizontal-navigation-item-active-forced': item.active
+                'fuse-horizontal-navigation-item-active-forced': item.active,
             }"
             [routerLink]="[item.link]"
             [fragment]="item.fragment ?? null"
@@ -81,14 +69,10 @@
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
-    </ng-container>
+    }
 
     <!-- Item with an external link and function -->
-    <ng-container
-        *ngIf="
-            item.link && item.externalLink && item.function && !item.disabled
-        "
-    >
+    @if (item.link && item.externalLink && item.function && !item.disabled) {
         <a
             class="fuse-horizontal-navigation-item"
             [href]="item.link"
@@ -99,41 +83,41 @@
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
-    </ng-container>
+    }
 
     <!-- Item with a no link and no function -->
-    <ng-container *ngIf="!item.link && !item.function && !item.disabled">
+    @if (!item.link && !item.function && !item.disabled) {
         <div
             class="fuse-horizontal-navigation-item"
             [ngClass]="{
-                'fuse-horizontal-navigation-item-active-forced': item.active
+                'fuse-horizontal-navigation-item-active-forced': item.active,
             }"
             [matTooltip]="item.tooltip || ''"
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
-    </ng-container>
+    }
 
     <!-- Item is disabled -->
-    <ng-container *ngIf="item.disabled">
+    @if (item.disabled) {
         <div
             class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
-    </ng-container>
+    }
 </div>
 
 <!-- Item template -->
 <ng-template #itemTemplate>
     <!-- Icon -->
-    <ng-container *ngIf="item.icon">
+    @if (item.icon) {
         <mat-icon
             class="fuse-horizontal-navigation-item-icon"
             [ngClass]="item.classes?.icon"
             [svgIcon]="item.icon"
         ></mat-icon>
-    </ng-container>
+    }
 
     <!-- Title & Subtitle -->
     <div class="fuse-horizontal-navigation-item-title-wrapper">
@@ -142,17 +126,17 @@
                 {{ item.title }}
             </span>
         </div>
-        <ng-container *ngIf="item.subtitle">
+        @if (item.subtitle) {
             <div class="fuse-horizontal-navigation-item-subtitle text-hint">
                 <span [ngClass]="item.classes?.subtitle">
                     {{ item.subtitle }}
                 </span>
             </div>
-        </ng-container>
+        }
     </div>
 
     <!-- Badge -->
-    <ng-container *ngIf="item.badge">
+    @if (item.badge) {
         <div class="fuse-horizontal-navigation-item-badge">
             <div
                 class="fuse-horizontal-navigation-item-badge-content"
@@ -161,5 +145,5 @@
                 {{ item.badge.title }}
             </div>
         </div>
-    </ng-container>
+    }
 </ng-template>
diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
index 0aed519c..060946cd 100644
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -29,7 +29,6 @@ import { Subject, takeUntil } from 'rxjs';
     standalone: true,
     imports: [
         NgClass,
-        NgIf,
         RouterLink,
         RouterLinkActive,
         MatTooltipModule,
diff --git a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
index 39734024..76475d31 100644
--- a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
@@ -1,8 +1,8 @@
-<ng-container *ngIf="!child">
+@if (!child) {
     <div
         [ngClass]="{
             'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
-            'fuse-horizontal-navigation-menu-active-forced': item.active
+            'fuse-horizontal-navigation-menu-active-forced': item.active,
         }"
         [matMenuTriggerFor]="matMenu"
         (onMenuOpen)="triggerChangeDetection()"
@@ -13,20 +13,18 @@
             *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"
         ></ng-container>
     </div>
-</ng-container>
+}
 
 <mat-menu
     class="fuse-horizontal-navigation-menu-panel"
     [overlapTrigger]="false"
     #matMenu="matMenu"
 >
-    <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
+    @for (item of item.children; track trackByFn($index, item)) {
         <!-- Skip the hidden items -->
-        <ng-container
-            *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
-        >
+        @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
             <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
+            @if (item.type === 'basic') {
                 <div
                     class="fuse-horizontal-navigation-menu-item"
                     [disabled]="item.disabled"
@@ -37,16 +35,14 @@
                         [name]="name"
                     ></fuse-horizontal-navigation-basic-item>
                 </div>
-            </ng-container>
+            }
 
             <!-- Branch: aside, collapsable, group -->
-            <ng-container
-                *ngIf="
-                    item.type === 'aside' ||
-                    item.type === 'collapsable' ||
-                    item.type === 'group'
-                "
-            >
+            @if (
+                item.type === 'aside' ||
+                item.type === 'collapsable' ||
+                item.type === 'group'
+            ) {
                 <div
                     class="fuse-horizontal-navigation-menu-item"
                     [disabled]="item.disabled"
@@ -66,19 +62,19 @@
                         #branch
                     ></fuse-horizontal-navigation-branch-item>
                 </div>
-            </ng-container>
+            }
 
             <!-- Divider -->
-            <ng-container *ngIf="item.type === 'divider'">
+            @if (item.type === 'divider') {
                 <div class="fuse-horizontal-navigation-menu-item" mat-menu-item>
                     <fuse-horizontal-navigation-divider-item
                         [item]="item"
                         [name]="name"
                     ></fuse-horizontal-navigation-divider-item>
                 </div>
-            </ng-container>
-        </ng-container>
-    </ng-container>
+            }
+        }
+    }
 </mat-menu>
 
 <!-- Item template -->
@@ -92,18 +88,18 @@
             class="fuse-horizontal-navigation-item"
             [ngClass]="{
                 'fuse-horizontal-navigation-item-disabled': item.disabled,
-                'fuse-horizontal-navigation-item-active-forced': item.active
+                'fuse-horizontal-navigation-item-active-forced': item.active,
             }"
             [matTooltip]="item.tooltip || ''"
         >
             <!-- Icon -->
-            <ng-container *ngIf="item.icon">
+            @if (item.icon) {
                 <mat-icon
                     class="fuse-horizontal-navigation-item-icon"
                     [ngClass]="item.classes?.icon"
                     [svgIcon]="item.icon"
                 ></mat-icon>
-            </ng-container>
+            }
 
             <!-- Title & Subtitle -->
             <div class="fuse-horizontal-navigation-item-title-wrapper">
@@ -112,7 +108,7 @@
                         {{ item.title }}
                     </span>
                 </div>
-                <ng-container *ngIf="item.subtitle">
+                @if (item.subtitle) {
                     <div
                         class="fuse-horizontal-navigation-item-subtitle text-hint"
                     >
@@ -120,11 +116,11 @@
                             {{ item.subtitle }}
                         </span>
                     </div>
-                </ng-container>
+                }
             </div>
 
             <!-- Badge -->
-            <ng-container *ngIf="item.badge">
+            @if (item.badge) {
                 <div class="fuse-horizontal-navigation-item-badge">
                     <div
                         class="fuse-horizontal-navigation-item-badge-content"
@@ -133,7 +129,7 @@
                         {{ item.badge.title }}
                     </div>
                 </div>
-            </ng-container>
+            }
         </div>
     </div>
 </ng-template>
diff --git a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
index 8c4be74b..a474a4a5 100644
--- a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -27,11 +27,9 @@ import { Subject, takeUntil } from 'rxjs';
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     imports: [
-        NgIf,
         NgClass,
         MatMenuModule,
         NgTemplateOutlet,
-        NgFor,
         FuseHorizontalNavigationBasicItemComponent,
         forwardRef(() => FuseHorizontalNavigationBranchItemComponent),
         FuseHorizontalNavigationDividerItemComponent,
diff --git a/src/@fuse/components/navigation/horizontal/horizontal.component.html b/src/@fuse/components/navigation/horizontal/horizontal.component.html
index 8b7310ed..1c193f38 100644
--- a/src/@fuse/components/navigation/horizontal/horizontal.component.html
+++ b/src/@fuse/components/navigation/horizontal/horizontal.component.html
@@ -1,41 +1,37 @@
 <div class="fuse-horizontal-navigation-wrapper">
-    <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
+    @for (item of navigation; track trackByFn($index, item)) {
         <!-- Skip the hidden items -->
-        <ng-container
-            *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
-        >
+        @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
             <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
+            @if (item.type === 'basic') {
                 <fuse-horizontal-navigation-basic-item
                     class="fuse-horizontal-navigation-menu-item"
                     [item]="item"
                     [name]="name"
                 ></fuse-horizontal-navigation-basic-item>
-            </ng-container>
+            }
 
             <!-- Branch: aside, collapsable, group -->
-            <ng-container
-                *ngIf="
-                    item.type === 'aside' ||
-                    item.type === 'collapsable' ||
-                    item.type === 'group'
-                "
-            >
+            @if (
+                item.type === 'aside' ||
+                item.type === 'collapsable' ||
+                item.type === 'group'
+            ) {
                 <fuse-horizontal-navigation-branch-item
                     class="fuse-horizontal-navigation-menu-item"
                     [item]="item"
                     [name]="name"
                 ></fuse-horizontal-navigation-branch-item>
-            </ng-container>
+            }
 
             <!-- Spacer -->
-            <ng-container *ngIf="item.type === 'spacer'">
+            @if (item.type === 'spacer') {
                 <fuse-horizontal-navigation-spacer-item
                     class="fuse-horizontal-navigation-menu-item"
                     [item]="item"
                     [name]="name"
                 ></fuse-horizontal-navigation-spacer-item>
-            </ng-container>
-        </ng-container>
-    </ng-container>
+            }
+        }
+    }
 </div>
diff --git a/src/@fuse/components/navigation/horizontal/horizontal.component.ts b/src/@fuse/components/navigation/horizontal/horizontal.component.ts
index 327c991d..6c03011f 100644
--- a/src/@fuse/components/navigation/horizontal/horizontal.component.ts
+++ b/src/@fuse/components/navigation/horizontal/horizontal.component.ts
@@ -1,4 +1,3 @@
-import { NgFor, NgIf } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -30,8 +29,6 @@ import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer
     exportAs: 'fuseHorizontalNavigation',
     standalone: true,
     imports: [
-        NgFor,
-        NgIf,
         FuseHorizontalNavigationBasicItemComponent,
         FuseHorizontalNavigationBranchItemComponent,
         FuseHorizontalNavigationSpacerItemComponent,
diff --git a/src/@fuse/components/navigation/vertical/components/aside/aside.component.html b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
index 34dff3ae..d6189342 100644
--- a/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
+++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
@@ -8,18 +8,18 @@
         [ngClass]="{
             'fuse-vertical-navigation-item-active': active,
             'fuse-vertical-navigation-item-disabled': item.disabled,
-            'fuse-vertical-navigation-item-active-forced': item.active
+            'fuse-vertical-navigation-item-active-forced': item.active,
         }"
         [matTooltip]="item.tooltip || ''"
     >
         <!-- Icon -->
-        <ng-container *ngIf="item.icon">
+        @if (item.icon) {
             <mat-icon
                 class="fuse-vertical-navigation-item-icon"
                 [ngClass]="item.classes?.icon"
                 [svgIcon]="item.icon"
             ></mat-icon>
-        </ng-container>
+        }
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
@@ -28,17 +28,17 @@
                     {{ item.title }}
                 </span>
             </div>
-            <ng-container *ngIf="item.subtitle">
+            @if (item.subtitle) {
                 <div class="fuse-vertical-navigation-item-subtitle">
                     <span [ngClass]="item.classes?.subtitle">
                         {{ item.subtitle }}
                     </span>
                 </div>
-            </ng-container>
+            }
         </div>
 
         <!-- Badge -->
-        <ng-container *ngIf="item.badge">
+        @if (item.badge) {
             <div class="fuse-vertical-navigation-item-badge">
                 <div
                     class="fuse-vertical-navigation-item-badge-content"
@@ -47,58 +47,56 @@
                     {{ item.badge.title }}
                 </div>
             </div>
-        </ng-container>
+        }
     </div>
 </div>
 
-<ng-container *ngIf="!skipChildren">
+@if (!skipChildren) {
     <div class="fuse-vertical-navigation-item-children">
-        <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
+        @for (item of item.children; track trackByFn($index, item)) {
             <!-- Skip the hidden items -->
-            <ng-container
-                *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
-            >
+            @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
                 <!-- Basic -->
-                <ng-container *ngIf="item.type === 'basic'">
+                @if (item.type === 'basic') {
                     <fuse-vertical-navigation-basic-item
                         [item]="item"
                         [name]="name"
                     ></fuse-vertical-navigation-basic-item>
-                </ng-container>
+                }
 
                 <!-- Collapsable -->
-                <ng-container *ngIf="item.type === 'collapsable'">
+                @if (item.type === 'collapsable') {
                     <fuse-vertical-navigation-collapsable-item
                         [item]="item"
                         [name]="name"
                         [autoCollapse]="autoCollapse"
                     ></fuse-vertical-navigation-collapsable-item>
-                </ng-container>
+                }
 
                 <!-- Divider -->
-                <ng-container *ngIf="item.type === 'divider'">
+                @if (item.type === 'divider') {
                     <fuse-vertical-navigation-divider-item
                         [item]="item"
                         [name]="name"
                     ></fuse-vertical-navigation-divider-item>
-                </ng-container>
+                }
 
                 <!-- Group -->
-                <ng-container *ngIf="item.type === 'group'">
+                @if (item.type === 'group') {
                     <fuse-vertical-navigation-group-item
                         [item]="item"
                         [name]="name"
                     ></fuse-vertical-navigation-group-item>
-                </ng-container>
+                }
 
                 <!-- Spacer -->
-                <ng-container *ngIf="item.type === 'spacer'">
+                @if (item.type === 'spacer') {
                     <fuse-vertical-navigation-spacer-item
                         [item]="item"
                         [name]="name"
                     ></fuse-vertical-navigation-spacer-item>
-                </ng-container>
-            </ng-container>
-        </ng-container>
+                }
+            }
+        }
     </div>
-</ng-container>
+}
diff --git a/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts b/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
index 0113cd0b..c11efb6e 100644
--- a/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { NgClass, NgFor, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -32,9 +32,7 @@ import { Subject, filter, takeUntil } from 'rxjs';
     imports: [
         NgClass,
         MatTooltipModule,
-        NgIf,
         MatIconModule,
-        NgFor,
         FuseVerticalNavigationBasicItemComponent,
         FuseVerticalNavigationCollapsableItemComponent,
         FuseVerticalNavigationDividerItemComponent,
diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
index 39603bc8..f10bac11 100644
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
@@ -5,15 +5,11 @@
     [ngClass]="item.classes?.wrapper"
 >
     <!-- Item with an internal link -->
-    <ng-container
-        *ngIf="
-            item.link && !item.externalLink && !item.function && !item.disabled
-        "
-    >
+    @if (item.link && !item.externalLink && !item.function && !item.disabled) {
         <a
             class="fuse-vertical-navigation-item"
             [ngClass]="{
-                'fuse-vertical-navigation-item-active-forced': item.active
+                'fuse-vertical-navigation-item-active-forced': item.active,
             }"
             [routerLink]="[item.link]"
             [fragment]="item.fragment ?? null"
@@ -26,14 +22,10 @@
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
-    </ng-container>
+    }
 
     <!-- Item with an external link -->
-    <ng-container
-        *ngIf="
-            item.link && item.externalLink && !item.function && !item.disabled
-        "
-    >
+    @if (item.link && item.externalLink && !item.function && !item.disabled) {
         <a
             class="fuse-vertical-navigation-item"
             [href]="item.link"
@@ -42,32 +34,28 @@
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
-    </ng-container>
+    }
 
     <!-- Item with a function -->
-    <ng-container *ngIf="!item.link && item.function && !item.disabled">
+    @if (!item.link && item.function && !item.disabled) {
         <div
             class="fuse-vertical-navigation-item"
             [ngClass]="{
-                'fuse-vertical-navigation-item-active-forced': item.active
+                'fuse-vertical-navigation-item-active-forced': item.active,
             }"
             [matTooltip]="item.tooltip || ''"
             (click)="item.function(item)"
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
-    </ng-container>
+    }
 
     <!-- Item with an internal link and function -->
-    <ng-container
-        *ngIf="
-            item.link && !item.externalLink && item.function && !item.disabled
-        "
-    >
+    @if (item.link && !item.externalLink && item.function && !item.disabled) {
         <a
             class="fuse-vertical-navigation-item"
             [ngClass]="{
-                'fuse-vertical-navigation-item-active-forced': item.active
+                'fuse-vertical-navigation-item-active-forced': item.active,
             }"
             [routerLink]="[item.link]"
             [fragment]="item.fragment ?? null"
@@ -81,14 +69,10 @@
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
-    </ng-container>
+    }
 
     <!-- Item with an external link and function -->
-    <ng-container
-        *ngIf="
-            item.link && item.externalLink && item.function && !item.disabled
-        "
-    >
+    @if (item.link && item.externalLink && item.function && !item.disabled) {
         <a
             class="fuse-vertical-navigation-item"
             [href]="item.link"
@@ -98,42 +82,42 @@
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
-    </ng-container>
+    }
 
     <!-- Item with a no link and no function -->
-    <ng-container *ngIf="!item.link && !item.function && !item.disabled">
+    @if (!item.link && !item.function && !item.disabled) {
         <div
             class="fuse-vertical-navigation-item"
             [ngClass]="{
-                'fuse-vertical-navigation-item-active-forced': item.active
+                'fuse-vertical-navigation-item-active-forced': item.active,
             }"
             [matTooltip]="item.tooltip || ''"
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
-    </ng-container>
+    }
 
     <!-- Item is disabled -->
-    <ng-container *ngIf="item.disabled">
+    @if (item.disabled) {
         <div
             class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
             [matTooltip]="item.tooltip || ''"
         >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
-    </ng-container>
+    }
 </div>
 
 <!-- Item template -->
 <ng-template #itemTemplate>
     <!-- Icon -->
-    <ng-container *ngIf="item.icon">
+    @if (item.icon) {
         <mat-icon
             class="fuse-vertical-navigation-item-icon"
             [ngClass]="item.classes?.icon"
             [svgIcon]="item.icon"
         ></mat-icon>
-    </ng-container>
+    }
 
     <!-- Title & Subtitle -->
     <div class="fuse-vertical-navigation-item-title-wrapper">
@@ -142,17 +126,17 @@
                 {{ item.title }}
             </span>
         </div>
-        <ng-container *ngIf="item.subtitle">
+        @if (item.subtitle) {
             <div class="fuse-vertical-navigation-item-subtitle">
                 <span [ngClass]="item.classes?.subtitle">
                     {{ item.subtitle }}
                 </span>
             </div>
-        </ng-container>
+        }
     </div>
 
     <!-- Badge -->
-    <ng-container *ngIf="item.badge">
+    @if (item.badge) {
         <div class="fuse-vertical-navigation-item-badge">
             <div
                 class="fuse-vertical-navigation-item-badge-content"
@@ -161,5 +145,5 @@
                 {{ item.badge.title }}
             </div>
         </div>
-    </ng-container>
+    }
 </ng-template>
diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
index f83988da..182018d5 100644
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -28,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
     standalone: true,
     imports: [
         NgClass,
-        NgIf,
         RouterLink,
         RouterLinkActive,
         MatTooltipModule,
diff --git a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
index 56c806f3..6dc96ff9 100644
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
@@ -10,13 +10,13 @@
         (click)="toggleCollapsable()"
     >
         <!-- Icon -->
-        <ng-container *ngIf="item.icon">
+        @if (item.icon) {
             <mat-icon
                 class="fuse-vertical-navigation-item-icon"
                 [ngClass]="item.classes?.icon"
                 [svgIcon]="item.icon"
             ></mat-icon>
-        </ng-container>
+        }
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
@@ -25,17 +25,17 @@
                     {{ item.title }}
                 </span>
             </div>
-            <ng-container *ngIf="item.subtitle">
+            @if (item.subtitle) {
                 <div class="fuse-vertical-navigation-item-subtitle">
                     <span [ngClass]="item.classes?.subtitle">
                         {{ item.subtitle }}
                     </span>
                 </div>
-            </ng-container>
+            }
         </div>
 
         <!-- Badge -->
-        <ng-container *ngIf="item.badge">
+        @if (item.badge) {
             <div class="fuse-vertical-navigation-item-badge">
                 <div
                     class="fuse-vertical-navigation-item-badge-content"
@@ -44,7 +44,7 @@
                     {{ item.badge.title }}
                 </div>
             </div>
-        </ng-container>
+        }
 
         <!-- Arrow -->
         <mat-icon
@@ -54,56 +54,52 @@
     </div>
 </div>
 
-<div
-    class="fuse-vertical-navigation-item-children"
-    *ngIf="!isCollapsed"
-    @expandCollapse
->
-    <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-        <!-- Skip the hidden items -->
-        <ng-container
-            *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
-        >
-            <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
-                <fuse-vertical-navigation-basic-item
-                    [item]="item"
-                    [name]="name"
-                ></fuse-vertical-navigation-basic-item>
-            </ng-container>
+@if (!isCollapsed) {
+    <div class="fuse-vertical-navigation-item-children" @expandCollapse>
+        @for (item of item.children; track trackByFn($index, item)) {
+            <!-- Skip the hidden items -->
+            @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
+                <!-- Basic -->
+                @if (item.type === 'basic') {
+                    <fuse-vertical-navigation-basic-item
+                        [item]="item"
+                        [name]="name"
+                    ></fuse-vertical-navigation-basic-item>
+                }
 
-            <!-- Collapsable -->
-            <ng-container *ngIf="item.type === 'collapsable'">
-                <fuse-vertical-navigation-collapsable-item
-                    [item]="item"
-                    [name]="name"
-                    [autoCollapse]="autoCollapse"
-                ></fuse-vertical-navigation-collapsable-item>
-            </ng-container>
+                <!-- Collapsable -->
+                @if (item.type === 'collapsable') {
+                    <fuse-vertical-navigation-collapsable-item
+                        [item]="item"
+                        [name]="name"
+                        [autoCollapse]="autoCollapse"
+                    ></fuse-vertical-navigation-collapsable-item>
+                }
 
-            <!-- Divider -->
-            <ng-container *ngIf="item.type === 'divider'">
-                <fuse-vertical-navigation-divider-item
-                    [item]="item"
-                    [name]="name"
-                ></fuse-vertical-navigation-divider-item>
-            </ng-container>
+                <!-- Divider -->
+                @if (item.type === 'divider') {
+                    <fuse-vertical-navigation-divider-item
+                        [item]="item"
+                        [name]="name"
+                    ></fuse-vertical-navigation-divider-item>
+                }
 
-            <!-- Group -->
-            <ng-container *ngIf="item.type === 'group'">
-                <fuse-vertical-navigation-group-item
-                    [item]="item"
-                    [name]="name"
-                ></fuse-vertical-navigation-group-item>
-            </ng-container>
+                <!-- Group -->
+                @if (item.type === 'group') {
+                    <fuse-vertical-navigation-group-item
+                        [item]="item"
+                        [name]="name"
+                    ></fuse-vertical-navigation-group-item>
+                }
 
-            <!-- Spacer -->
-            <ng-container *ngIf="item.type === 'spacer'">
-                <fuse-vertical-navigation-spacer-item
-                    [item]="item"
-                    [name]="name"
-                ></fuse-vertical-navigation-spacer-item>
-            </ng-container>
-        </ng-container>
-    </ng-container>
-</div>
+                <!-- Spacer -->
+                @if (item.type === 'spacer') {
+                    <fuse-vertical-navigation-spacer-item
+                        [item]="item"
+                        [name]="name"
+                    ></fuse-vertical-navigation-spacer-item>
+                }
+            }
+        }
+    </div>
+}
diff --git a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
index 2bf347e3..ca7a464d 100644
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { NgClass, NgFor, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -33,9 +33,7 @@ import { Subject, filter, takeUntil } from 'rxjs';
     imports: [
         NgClass,
         MatTooltipModule,
-        NgIf,
         MatIconModule,
-        NgFor,
         FuseVerticalNavigationBasicItemComponent,
         forwardRef(() => FuseVerticalNavigationCollapsableItemComponent),
         FuseVerticalNavigationDividerItemComponent,
diff --git a/src/@fuse/components/navigation/vertical/components/group/group.component.html b/src/@fuse/components/navigation/vertical/components/group/group.component.html
index febc6eba..efdf0218 100644
--- a/src/@fuse/components/navigation/vertical/components/group/group.component.html
+++ b/src/@fuse/components/navigation/vertical/components/group/group.component.html
@@ -6,13 +6,13 @@
 >
     <div class="fuse-vertical-navigation-item">
         <!-- Icon -->
-        <ng-container *ngIf="item.icon">
+        @if (item.icon) {
             <mat-icon
                 class="fuse-vertical-navigation-item-icon"
                 [ngClass]="item.classes?.icon"
                 [svgIcon]="item.icon"
             ></mat-icon>
-        </ng-container>
+        }
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
@@ -21,17 +21,17 @@
                     {{ item.title }}
                 </span>
             </div>
-            <ng-container *ngIf="item.subtitle">
+            @if (item.subtitle) {
                 <div class="fuse-vertical-navigation-item-subtitle">
                     <span [ngClass]="item.classes?.subtitle">
                         {{ item.subtitle }}
                     </span>
                 </div>
-            </ng-container>
+            }
         </div>
 
         <!-- Badge -->
-        <ng-container *ngIf="item.badge">
+        @if (item.badge) {
             <div class="fuse-vertical-navigation-item-badge">
                 <div
                     class="fuse-vertical-navigation-item-badge-content"
@@ -40,52 +40,52 @@
                     {{ item.badge.title }}
                 </div>
             </div>
-        </ng-container>
+        }
     </div>
 </div>
 
-<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
+@for (item of item.children; track trackByFn($index, item)) {
     <!-- Skip the hidden items -->
-    <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
+    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
         <!-- Basic -->
-        <ng-container *ngIf="item.type === 'basic'">
+        @if (item.type === 'basic') {
             <fuse-vertical-navigation-basic-item
                 [item]="item"
                 [name]="name"
             ></fuse-vertical-navigation-basic-item>
-        </ng-container>
+        }
 
         <!-- Collapsable -->
-        <ng-container *ngIf="item.type === 'collapsable'">
+        @if (item.type === 'collapsable') {
             <fuse-vertical-navigation-collapsable-item
                 [item]="item"
                 [name]="name"
                 [autoCollapse]="autoCollapse"
             ></fuse-vertical-navigation-collapsable-item>
-        </ng-container>
+        }
 
         <!-- Divider -->
-        <ng-container *ngIf="item.type === 'divider'">
+        @if (item.type === 'divider') {
             <fuse-vertical-navigation-divider-item
                 [item]="item"
                 [name]="name"
             ></fuse-vertical-navigation-divider-item>
-        </ng-container>
+        }
 
         <!-- Group -->
-        <ng-container *ngIf="item.type === 'group'">
+        @if (item.type === 'group') {
             <fuse-vertical-navigation-group-item
                 [item]="item"
                 [name]="name"
             ></fuse-vertical-navigation-group-item>
-        </ng-container>
+        }
 
         <!-- Spacer -->
-        <ng-container *ngIf="item.type === 'spacer'">
+        @if (item.type === 'spacer') {
             <fuse-vertical-navigation-spacer-item
                 [item]="item"
                 [name]="name"
             ></fuse-vertical-navigation-spacer-item>
-        </ng-container>
-    </ng-container>
-</ng-container>
+        }
+    }
+}
diff --git a/src/@fuse/components/navigation/vertical/components/group/group.component.ts b/src/@fuse/components/navigation/vertical/components/group/group.component.ts
index 71b3b513..9a959537 100644
--- a/src/@fuse/components/navigation/vertical/components/group/group.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/group/group.component.ts
@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { NgClass, NgFor, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -27,9 +27,7 @@ import { Subject, takeUntil } from 'rxjs';
     standalone: true,
     imports: [
         NgClass,
-        NgIf,
         MatIconModule,
-        NgFor,
         FuseVerticalNavigationBasicItemComponent,
         FuseVerticalNavigationCollapsableItemComponent,
         FuseVerticalNavigationDividerItemComponent,
diff --git a/src/@fuse/components/navigation/vertical/vertical.component.html b/src/@fuse/components/navigation/vertical/vertical.component.html
index d1360e14..f925b6a8 100644
--- a/src/@fuse/components/navigation/vertical/vertical.component.html
+++ b/src/@fuse/components/navigation/vertical/vertical.component.html
@@ -10,7 +10,7 @@
         fuseScrollbar
         [fuseScrollbarOptions]="{
             wheelPropagation: inner,
-            suppressScrollX: true
+            suppressScrollX: true,
         }"
         #navigationContent
     >
@@ -22,13 +22,11 @@
         </div>
 
         <!-- Items -->
-        <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
+        @for (item of navigation; track trackByFn($index, item)) {
             <!-- Skip the hidden items -->
-            <ng-container
-                *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
-            >
+            @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
                 <!-- Aside -->
-                <ng-container *ngIf="item.type === 'aside'">
+                @if (item.type === 'aside') {
                     <fuse-vertical-navigation-aside-item
                         [item]="item"
                         [name]="name"
@@ -37,51 +35,51 @@
                         [skipChildren]="true"
                         (click)="toggleAside(item)"
                     ></fuse-vertical-navigation-aside-item>
-                </ng-container>
+                }
 
                 <!-- Basic -->
-                <ng-container *ngIf="item.type === 'basic'">
+                @if (item.type === 'basic') {
                     <fuse-vertical-navigation-basic-item
                         [item]="item"
                         [name]="name"
                     ></fuse-vertical-navigation-basic-item>
-                </ng-container>
+                }
 
                 <!-- Collapsable -->
-                <ng-container *ngIf="item.type === 'collapsable'">
+                @if (item.type === 'collapsable') {
                     <fuse-vertical-navigation-collapsable-item
                         [item]="item"
                         [name]="name"
                         [autoCollapse]="autoCollapse"
                     ></fuse-vertical-navigation-collapsable-item>
-                </ng-container>
+                }
 
                 <!-- Divider -->
-                <ng-container *ngIf="item.type === 'divider'">
+                @if (item.type === 'divider') {
                     <fuse-vertical-navigation-divider-item
                         [item]="item"
                         [name]="name"
                     ></fuse-vertical-navigation-divider-item>
-                </ng-container>
+                }
 
                 <!-- Group -->
-                <ng-container *ngIf="item.type === 'group'">
+                @if (item.type === 'group') {
                     <fuse-vertical-navigation-group-item
                         [item]="item"
                         [name]="name"
                         [autoCollapse]="autoCollapse"
                     ></fuse-vertical-navigation-group-item>
-                </ng-container>
+                }
 
                 <!-- Spacer -->
-                <ng-container *ngIf="item.type === 'spacer'">
+                @if (item.type === 'spacer') {
                     <fuse-vertical-navigation-spacer-item
                         [item]="item"
                         [name]="name"
                     ></fuse-vertical-navigation-spacer-item>
-                </ng-container>
-            </ng-container>
-        </ng-container>
+                }
+            }
+        }
 
         <!-- Content footer -->
         <div class="fuse-vertical-navigation-content-footer">
@@ -98,13 +96,13 @@
 </div>
 
 <!-- Aside -->
-<ng-container *ngIf="activeAsideItemId">
+@if (activeAsideItemId) {
     <div
         class="fuse-vertical-navigation-aside-wrapper"
         fuseScrollbar
         [fuseScrollbarOptions]="{
             wheelPropagation: false,
-            suppressScrollX: true
+            suppressScrollX: true,
         }"
         [@fadeInLeft]="position === 'left'"
         [@fadeInRight]="position === 'right'"
@@ -112,24 +110,18 @@
         [@fadeOutRight]="position === 'right'"
     >
         <!-- Items -->
-        <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
+        @for (item of navigation; track trackByFn($index, item)) {
             <!-- Skip the hidden items -->
-            <ng-container
-                *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
-            >
+            @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
                 <!-- Aside -->
-                <ng-container
-                    *ngIf="
-                        item.type === 'aside' && item.id === activeAsideItemId
-                    "
-                >
+                @if (item.type === 'aside' && item.id === activeAsideItemId) {
                     <fuse-vertical-navigation-aside-item
                         [item]="item"
                         [name]="name"
                         [autoCollapse]="autoCollapse"
                     ></fuse-vertical-navigation-aside-item>
-                </ng-container>
-            </ng-container>
-        </ng-container>
+                }
+            }
+        }
     </div>
-</ng-container>
+}
diff --git a/src/@fuse/components/navigation/vertical/vertical.component.ts b/src/@fuse/components/navigation/vertical/vertical.component.ts
index 8913ad47..446afcf9 100644
--- a/src/@fuse/components/navigation/vertical/vertical.component.ts
+++ b/src/@fuse/components/navigation/vertical/vertical.component.ts
@@ -6,7 +6,7 @@ import {
 } from '@angular/animations';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { DOCUMENT, NgFor, NgIf } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -67,8 +67,6 @@ import {
     standalone: true,
     imports: [
         FuseScrollbarDirective,
-        NgFor,
-        NgIf,
         FuseVerticalNavigationAsideItemComponent,
         FuseVerticalNavigationBasicItemComponent,
         FuseVerticalNavigationCollapsableItemComponent,
diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.html b/src/@fuse/services/confirmation/dialog/dialog.component.html
index 6da9b321..36e0d1c6 100644
--- a/src/@fuse/services/confirmation/dialog/dialog.component.html
+++ b/src/@fuse/services/confirmation/dialog/dialog.component.html
@@ -1,6 +1,6 @@
 <div class="relative flex h-full w-full flex-col">
     <!-- Dismiss button -->
-    <ng-container *ngIf="data.dismissible">
+    @if (data.dismissible) {
         <div class="absolute right-0 top-0 pr-4 pt-4">
             <button mat-icon-button [matDialogClose]="undefined">
                 <mat-icon
@@ -9,14 +9,14 @@
                 ></mat-icon>
             </button>
         </div>
-    </ng-container>
+    }
 
     <!-- Content -->
     <div
         class="flex flex-auto flex-col items-center p-8 pb-6 sm:flex-row sm:items-start sm:pb-8"
     >
         <!-- Icon -->
-        <ng-container *ngIf="data.icon.show">
+        @if (data.icon.show) {
             <div
                 class="flex h-10 w-10 flex-0 items-center justify-center rounded-full sm:mr-4"
                 [ngClass]="{
@@ -35,7 +35,7 @@
                     'bg-amber-100 text-amber-500 dark:bg-amber-500 dark:text-amber-50':
                         data.icon.color === 'warning',
                     'bg-red-100 text-red-600 dark:bg-red-600 dark:text-red-50':
-                        data.icon.color === 'error'
+                        data.icon.color === 'error',
                 }"
             >
                 <mat-icon
@@ -43,45 +43,45 @@
                     [svgIcon]="data.icon.name"
                 ></mat-icon>
             </div>
-        </ng-container>
+        }
 
-        <ng-container *ngIf="data.title || data.message">
+        @if (data.title || data.message) {
             <div
                 class="mt-4 flex flex-col items-center space-y-1 text-center sm:mt-0 sm:items-start sm:pr-8 sm:text-left"
             >
                 <!-- Title -->
-                <ng-container *ngIf="data.title">
+                @if (data.title) {
                     <div
                         class="text-xl font-medium leading-6"
                         [innerHTML]="data.title"
                     ></div>
-                </ng-container>
+                }
 
                 <!-- Message -->
-                <ng-container *ngIf="data.message">
+                @if (data.message) {
                     <div
                         class="text-secondary"
                         [innerHTML]="data.message"
                     ></div>
-                </ng-container>
+                }
             </div>
-        </ng-container>
+        }
     </div>
 
     <!-- Actions -->
-    <ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show">
+    @if (data.actions.confirm.show || data.actions.cancel.show) {
         <div
             class="flex items-center justify-center space-x-3 bg-gray-50 px-6 py-4 dark:bg-black dark:bg-opacity-10 sm:justify-end"
         >
             <!-- Cancel -->
-            <ng-container *ngIf="data.actions.cancel.show">
+            @if (data.actions.cancel.show) {
                 <button mat-stroked-button [matDialogClose]="'cancelled'">
                     {{ data.actions.cancel.label }}
                 </button>
-            </ng-container>
+            }
 
             <!-- Confirm -->
-            <ng-container *ngIf="data.actions.confirm.show">
+            @if (data.actions.confirm.show) {
                 <button
                     mat-flat-button
                     [color]="data.actions.confirm.color"
@@ -89,7 +89,7 @@
                 >
                     {{ data.actions.confirm.label }}
                 </button>
-            </ng-container>
+            }
         </div>
-    </ng-container>
+    }
 </div>
diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.ts b/src/@fuse/services/confirmation/dialog/dialog.component.ts
index 3b1299d8..f9604d9a 100644
--- a/src/@fuse/services/confirmation/dialog/dialog.component.ts
+++ b/src/@fuse/services/confirmation/dialog/dialog.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { Component, ViewEncapsulation, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -25,7 +25,7 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
     ],
     encapsulation: ViewEncapsulation.None,
     standalone: true,
-    imports: [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
+    imports: [MatButtonModule, MatDialogModule, MatIconModule, NgClass],
 })
 export class FuseConfirmationDialogComponent {
     data: FuseConfirmationConfig = inject(MAT_DIALOG_DATA);