Angular 22 package update and code improvement

package.json

@@ -16,41 +16,41 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "21.0.3",
-    "@angular/cdk": "21.0.2",
-    "@angular/common": "21.0.3",
-    "@angular/compiler": "21.0.3",
-    "@angular/core": "21.0.3",
-    "@angular/forms": "21.0.3",
-    "@angular/platform-browser": "21.0.3",
-    "@angular/platform-browser-dynamic": "21.0.3",
-    "@angular/router": "21.0.3",
+    "@angular/animations": "22.0.0-next.11",
+    "@angular/cdk": "22.0.0-next.8",
+    "@angular/common": "22.0.0-next.11",
+    "@angular/compiler": "22.0.0-next.11",
+    "@angular/core": "22.0.0-next.11",
+    "@angular/forms": "22.0.0-next.11",
+    "@angular/platform-browser": "22.0.0-next.11",
+    "@angular/platform-browser-dynamic": "22.0.0-next.11",
+    "@angular/router": "22.0.0-next.11",
     "@ant-design/icons-angular": "21.0.0",
-    "@ng-bootstrap/ng-bootstrap": "19.0.1",
+    "@ng-bootstrap/ng-bootstrap": "20.0.0",
     "@popperjs/core": "2.11.8",
-    "apexcharts": "5.3.6",
+    "apexcharts": "5.10.6",
     "bootstrap": "5.3.8",
-    "ng-apexcharts": "2.0.4",
-    "ngx-scrollbar": "18.0.0",
+    "ng-apexcharts": "2.4.0",
+    "ngx-scrollbar": "^18.0.0",
     "rxjs": "~7.8.2",
     "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "21.0.2",
-    "@angular-eslint/builder": "21.1.0",
-    "@angular-eslint/eslint-plugin": "21.1.0",
-    "@angular-eslint/eslint-plugin-template": "21.1.0",
-    "@angular-eslint/schematics": "21.1.0",
-    "@angular-eslint/template-parser": "21.1.0",
-    "@angular/cli": "21.0.2",
-    "@angular/compiler-cli": "21.0.3",
+    "@angular-devkit/build-angular": "22.0.0-next.7",
+    "@angular-eslint/builder": "21.3.1",
+    "@angular-eslint/eslint-plugin": "21.3.1",
+    "@angular-eslint/eslint-plugin-template": "21.3.1",
+    "@angular-eslint/schematics": "21.3.1",
+    "@angular-eslint/template-parser": "21.3.1",
+    "@angular/cli": "22.0.0-next.7",
+    "@angular/compiler-cli": "22.0.0-next.11",
     "@eslint/eslintrc": "3.3.3",
     "@eslint/js": "9.39.1",
     "@types/node": "24.10.2",
     "@typescript-eslint/eslint-plugin": "8.49.0",
     "@typescript-eslint/parser": "8.49.0",
     "eslint": "9.39.1",
     "prettier": "3.7.4",
-    "typescript": "5.9.3"
+    "typescript": "6.0.3"
   }
 }

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet><app-spinner /></router-outlet>
+<router-outlet/><app-spinner />

src/app/demo/dashboard/default/default.component.html

@@ -43,7 +43,7 @@ <h5 class="mb-3">Recent Orders</h5>
             @for (order of recentOrder; track order) {
               <tr>
                 <td>
-                  <a href="javascript:" class="text-muted">{{ order.id }}</a>
+                  <a href="javascript:void(0)" class="text-muted">{{ order.id }}</a>
                 </td>
                 <td>{{ order.name }}</td>
                 <td>
@@ -73,7 +73,7 @@ <h5 class="mb-3">Transaction History</h5>
     <div class="card">
       <div class="list-group list-group-flush">
         @for (history of transaction; track history) {
-          <a href="javascript:" class="list-group-item list-group-item-action px-3">
+          <a href="javascript:void(0)" class="list-group-item list-group-item-action px-3">
             <div class="d-flex">
               <div class="flex-shrink-0">
                 <div class="avatar avatar-s rounded-circle {{ history.background }}">

src/app/demo/pages/authentication/auth-login/auth-login.component.html

@@ -2,7 +2,7 @@
   <div class="auth-wrapper v3">
     <div class="auth-form">
       <div class="auth-header">
-        <a href="javascript:"><img src="assets/images/logo-dark.svg" alt="logo" /></a>
+        <a href="javascript:void(0)"><img src="assets/images/logo-dark.svg" alt="logo" /></a>
       </div>
       <div class="card my-5">
         <div class="card-body">
@@ -23,7 +23,7 @@ <h3 class="mb-0"><b>Login</b></h3>
               <input class="form-check-input input-primary" type="checkbox" id="customCheckc1" checked="" />
               <label class="form-check-label text-muted" for="customCheckc1">Keep me sign in</label>
             </div>
-            <h5 class="text-secondary f-w-400"><a href="javascript:">Forgot Password?</a></h5>
+            <h5 class="text-secondary f-w-400"><a href="javascript:void(0)">Forgot Password?</a></h5>
           </div>
           <div class="d-grid mt-4">
             <button type="button" class="btn btn-primary">Login</button>

src/app/demo/pages/authentication/auth-register/auth-register.component.html

@@ -2,7 +2,7 @@
   <div class="auth-wrapper v3">
     <div class="auth-form">
       <div class="auth-header">
-        <a href="javascript:"><img src="assets/images/logo-dark.svg" alt="logo img" /></a>
+        <a href="javascript:void(0)"><img src="assets/images/logo-dark.svg" alt="logo img" /></a>
       </div>
       <div class="card my-5">
         <div class="card-body">
@@ -38,9 +38,9 @@ <h3 class="mb-0"><b>Sign up</b></h3>
           </div>
           <p class="mt-4 text-sm text-muted">
             By Signing up, you agree to our
-            <a href="javascript:" class="text-primary">Terms of Service</a>
+            <a href="javascript:void(0)" class="text-primary">Terms of Service</a>
             and
-            <a href="javascript:" class="text-primary">Privacy Policy</a>
+            <a href="javascript:void(0)" class="text-primary">Privacy Policy</a>
           </p>
           <div class="d-grid mt-3">
             <button type="button" class="btn btn-primary">Create Account</button>

src/app/theme/layouts/admin-layout/admin-layout.component.html

@@ -1,11 +1,7 @@
-<app-navigation
-  class="pc-sidebar"
-  [ngClass]="{
+<app-navigation class="pc-sidebar" [ngClass]="{
     'navbar-collapsed': navCollapsed,
     'mob-open': navCollapsedMob
-  }"
-  (NavCollapse)="this.navCollapsed = !this.navCollapsed"
-/>
+  }" (NavCollapse)="closeMenu()" />
 <app-nav-bar (NavCollapsedMob)="navMobClick()" (NavCollapse)="this.navCollapsed = !this.navCollapsed" />
 <div class="pc-container">
   <div class="coded-wrapper">
@@ -42,4 +38,4 @@
       </div>
     </div>
   </div>
-</footer>
+</footer>

src/app/theme/layouts/admin-layout/admin-layout.component.ts

@@ -20,7 +20,7 @@ export class AdminLayout {
   private layoutState = inject(LayoutStateService);
 
   // public props
-  navCollapsed: boolean;
+  navCollapsed!: boolean;
   windowWidth: number;
 
   // Constructor

src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.ts

@@ -17,9 +17,9 @@ export class NavBarComponent {
   readonly NavCollapse = output();
   readonly NavCollapsedMob = output<void>();
 
-  navCollapsed;
+  navCollapsed!: boolean;
   windowWidth: number;
-  navCollapsedMob;
+  navCollapsedMob: boolean;
 
   // Constructor
   constructor() {

src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.html

@@ -19,11 +19,11 @@
       <i antIcon type="menu-fold" theme="outline"></i>
     </a>
   </li>
-  <li class="dropdown pc-h-item d-inline-flex d-md-none" ngbDropdown>
-    <a class="pc-head-link dropdown-toggle arrow-none m-0" ngbDropdownToggle>
+  <li class="pc-h-item d-inline-flex d-md-none" ngbDropdown>
+    <a class="pc-head-link arrow-none m-0" ngbDropdownToggle>
       <i class="ti ti-search"></i>
     </a>
-    <div class="dropdown-menu dropdowm-menu-end pc-h-dropdown drp-search" ngbDropdownMenu>
+    <div class="dropdowm-menu-end pc-h-dropdown drp-search" ngbDropdownMenu>
       <form class="px-3">
         <div class="form-group mb-0 d-flex align-items-center">
           <i class="search f-12" antIcon type="search" theme="outline"></i>

src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.html

@@ -4,12 +4,12 @@
       <i antIcon type="github" theme="outline"></i>
     </a>
   </li>
-  <li class="dropdown pc-h-item" ngbDropdown>
-    <a href="javascript:" class="pc-head-link dropdown-toggle arrow-none me-0 bg-gray-200" data-bs-toggle="dropdown" ngbDropdownToggle>
+  <li class="pc-h-item" ngbDropdown>
+    <a href="javascript:void(0)" class="pc-head-link dropdown-toggle arrow-none me-0 bg-gray-200" data-bs-toggle="dropdown" ngbDropdownToggle>
       <i antIcon type="bell" theme="outline"></i>
       <span class="badge bg-primary pc-h-badge">3</span>
     </a>
-    <div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown" ngbDropdownMenu>
+    <div class="dropdown-notification dropdown-menu-end pc-h-dropdown" ngbDropdownMenu>
       <div class="dropdown-header d-flex align-items-center justify-content-between">
         <h5 class="m-0">Notification</h5>
         <a class="bg-transparent"><i class="text-success d-flex f-20" antIcon theme="outline" type="check-circle"></i></a>
@@ -85,16 +85,16 @@ <h5 class="m-0">Notification</h5>
       </ng-scrollbar>
       <div class="dropdown-divider mt-0"></div>
       <div class="text-center py-2">
-        <a href="javascript:" class="link-primary">View all</a>
+        <a href="javascript:void(0)" class="link-primary">View all</a>
       </div>
     </div>
   </li>
-  <li class="dropdown pc-h-item header-user-profile" ngbDropdown>
-    <a href="javascript:" class="pc-head-link dropdown-toggle arrow-none me-0" ngbDropdownToggle>
+  <li class="pc-h-item header-user-profile" ngbDropdown>
+    <a href="javascript:void(0)" class="pc-head-link arrow-none me-0" ngbDropdownToggle>
       <img src="assets/images/user/avatar-2.jpg" alt="user-image" class="user-avatar me-2" />
       <span class="f-w-600">John Doe</span>
     </a>
-    <div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown" ngbDropdownMenu>
+    <div class="dropdown-user-profile dropdown-menu-end pc-h-dropdown" ngbDropdownMenu>
       <div class="dropdown-header">
         <div class="d-flex mb-1">
           <div class="flex-shrink-0">
@@ -104,10 +104,10 @@ <h5 class="m-0">Notification</h5>
             <h6 class="mb-0">JWT User</h6>
             <span>UI/UX Designer</span>
           </div>
-          <a href="javascript:" class="bg-transparent"><i class="d-flex f-20" antIcon theme="outline" type="logout"></i></a>
+          <a href="javascript:void(0)" class="bg-transparent"><i class="d-flex f-20" antIcon theme="outline" type="logout"></i></a>
         </div>
       </div>
-      <ul ngbNav #nav="ngbNav" class="nav drp-tabs nav-fill nav-tabs">
+      <ul ngbNav #nav="ngbNav" class="drp-tabs nav-fill nav-tabs">
         <li ngbNavItem="1">
           <a ngbNavLink>
             <i antIcon theme="outline" type="user" class="me-2"></i>
@@ -116,7 +116,7 @@ <h6 class="mb-0">JWT User</h6>
           <ng-template ngbNavContent>
             @for (task of profile; track task) {
               <div>
-                <a href="javascript:" class="dropdown-item">
+                <a href="javascript:void(0)" class="dropdown-item">
                   <i class="text-muted" antIcon theme="outline" type="{{ task.icon }}"></i>
                   <span>{{ task.title }}</span>
                 </a>
@@ -132,7 +132,7 @@ <h6 class="mb-0">JWT User</h6>
           <ng-template ngbNavContent>
             @for (task of setting; track task) {
               <div>
-                <a href="javascript:" class="dropdown-item">
+                <a href="javascript:void(0)" class="dropdown-item">
                   <i class="text-muted" antIcon theme="outline" type="{{ task.icon }}"></i>
                   <span>{{ task.title }}</span>
                 </a>

src/app/theme/layouts/admin-layout/navigation/nav-content/nav-collapse/nav-collapse.component.html

@@ -1,9 +1,9 @@
 <!-- Vertical Layout -->
 <li class="nav-item coded-hasmenu" [routerLinkActive]="['active']">
-  <a [routerLinkActive]="['active']" href="javascript:" class="nav-link" (click)="navCollapse($event)">
-    <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+  <a [routerLinkActive]="['active']" href="javascript:void(0)" class="nav-link" (click)="navCollapse($event)">
+    <ng-container *ngTemplateOutlet="itemContent" />
   </a>
-  <ng-container *ngTemplateOutlet="subMenuContent"></ng-container>
+  <ng-container *ngTemplateOutlet="subMenuContent" />
 </li>
 
 <!-- all layout common -->
@@ -21,9 +21,9 @@
   <ul class="coded-submenu" [routerLinkActive]="['active']" [ngClass]="item().classes!">
     @for (items of item().children; track items) {
       @if (items.type === 'item') {
-        <app-nav-item [item]="items"></app-nav-item>
+        <app-nav-item [item]="items" />
       } @else if (items.type === 'collapse') {
-        <app-nav-collapse [item]="items"></app-nav-collapse>
+        <app-nav-collapse [item]="items" />
       }
     }
   </ul>

src/app/theme/layouts/admin-layout/navigation/nav-content/nav-content.component.html

@@ -4,7 +4,7 @@
     <ul class="nav coded-inner-navbar" (click)="fireOutClick()" (mouseleave)="navMob()">
       @for (item of navigations; track item) {
         @if (item.type === 'group') {
-          <app-nav-group [item]="item"></app-nav-group>
+          <app-nav-group [item]="item" />
         }
       }
     </ul>

src/app/theme/layouts/admin-layout/navigation/nav-content/nav-content.component.ts

@@ -98,7 +98,7 @@ export class NavContentComponent implements OnInit {
   }
 
   navMob() {
-    if (this.windowWidth < 1025 && document.querySelector('app-navigation.coded-navbar').classList.contains('mob-open')) {
+    if (this.windowWidth < 1025 && document.querySelector('app-navigation.coded-navbar')?.classList.contains('mob-open')) {
       this.NavCollapsedMob.emit();
     }
   }

src/app/theme/layouts/admin-layout/navigation/nav-content/nav-item/nav-item.component.ts

@@ -1,11 +1,12 @@
 // Angular import
-import { Component, input } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
 // Project import
 import { NavigationItem } from '../../navigation';
 import { SharedModule } from 'src/app/theme/shared/shared.module';
+import { LayoutStateService } from 'src/app/theme/shared/service/layout-state.service';
 
 @Component({
   selector: 'app-nav-item',
@@ -14,6 +15,9 @@ import { SharedModule } from 'src/app/theme/shared/shared.module';
   styleUrls: ['./nav-item.component.scss']
 })
 export class NavItemComponent {
+
+  private layoutState = inject(LayoutStateService);
+
   // public props
   readonly item = input.required<NavigationItem>();
 
@@ -47,7 +51,7 @@ export class NavItemComponent {
       }
     }
     if ((document.querySelector('app-navigation.pc-sidebar') as HTMLDivElement).classList.contains('mob-open')) {
-      (document.querySelector('app-navigation.pc-sidebar') as HTMLDivElement).classList.remove('mob-open');
+     this.layoutState.closeNavCollapsedMob(); 
     }
   }
 }

src/app/theme/layouts/admin-layout/navigation/navigation.component.html

@@ -1,14 +1,14 @@
 <nav>
   <div class="navbar-wrapper">
     <div class="m-header">
-      <a href="javascript:" class="b-brand">
+      <a [routerLink]="['/dashboard/default']" class="b-brand">
         <img src="assets/images/logo-dark.svg" alt="theme-logo" class="logo logo-dark logo-lg" />
       </a>
     </div>
     <app-nav-content
       (NavCollapsedMob)="navCollapseMob()"
       (SubmenuCollapse)="navSubmenuCollapse()"
       class="scroll-div w-100 compact"
-    ></app-nav-content>
+    />
   </div>
 </nav>

src/app/theme/layouts/admin-layout/navigation/navigation.component.ts

@@ -5,10 +5,11 @@ import { CommonModule } from '@angular/common';
 // project import
 import { SharedModule } from 'src/app/theme/shared/shared.module';
 import { NavContentComponent } from './nav-content/nav-content.component';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-navigation',
-  imports: [SharedModule, NavContentComponent, CommonModule],
+  imports: [SharedModule, NavContentComponent, CommonModule,RouterLink],
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss']
 })

src/app/theme/layouts/guest-layout/guest-layout.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet />

src/app/theme/shared/apexchart/analytics-chart/analytics-chart.component.html

@@ -1,28 +1,28 @@
 <h5 class="mb-3">Analytics Report</h5>
 <div class="card">
   <div class="list-group list-group-flush">
-    <a href="javascript:" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
+    <a href="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
       Company Finance Growth
       <span class="h5 mb-0">+45.14%</span>
     </a>
-    <a href="javascript:" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
+    <a href="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
       Company Expenses Ratio
       <span class="h5 mb-0">0.58%</span>
     </a>
   </div>
   <div class="card-body px-2">
     <div class="chart">
       <apx-chart
-        [series]="chartOptions.series"
-        [chart]="chartOptions.chart"
-        [plotOptions]="chartOptions.plotOptions"
-        [xaxis]="chartOptions.xaxis"
-        [colors]="chartOptions.colors"
-        [stroke]="chartOptions.stroke"
-        [yaxis]="chartOptions.yaxis"
-        [grid]="chartOptions.grid"
-        [tooltip]="chartOptions.tooltip"
-      ></apx-chart>
+        [series]="chartOptions.series!"
+        [chart]="chartOptions.chart!"
+        [plotOptions]="chartOptions.plotOptions!"
+        [xaxis]="chartOptions.xaxis!"
+        [colors]="chartOptions.colors!"
+        [stroke]="chartOptions.stroke!"
+        [yaxis]="chartOptions.yaxis!"
+        [grid]="chartOptions.grid!"
+        [tooltip]="chartOptions.tooltip!"
+      />
     </div>
   </div>
 </div>