First pass on the new control flow syntax migration

2025-04-23 16:43:10 +00:00 · 2024-06-03 09:19:47 +03:00 · 2024-06-03 09:19:47 +03:00 · b083fd3ebb
commit b083fd3ebb
parent db4cb459e5
24 changed files with 341 additions and 395 deletions
--- 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>
+}
--- 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 */
--- 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>
+    }
+}
--- 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 */
--- 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>
+}
--- 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);
--- 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>
--- 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,
--- 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>
--- 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,
--- 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>
--- 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,
--- 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>
+}
--- 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,
--- 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>
--- 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,
--- 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>
+}
--- 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,
--- 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>
+        }
+    }
+}
--- 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,
--- 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>
+}
--- 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,
--- 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>
--- 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);