angular 21 dev complete (#36) (#37)

Author: ct-dixit

.gitattributes

@@ -22,14 +22,14 @@ jobs:
       - name: 🚚 Get latest code
         uses: actions/checkout@v4
 
-      - name: Install Node.js 22
+      - name: Install Node.js 24
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: '24'
 
       - name: 🔨 Build Project
         run: |
-          yarn
+          yarn install
           yarn build-prod
 
       - name: 📂 Deploy to Server

.github/workflows/prod.yml

@@ -97,7 +97,7 @@ Datta Able is offers everything you need to create dashboards. We have included
 ## Technology Stack
 
 - Bootstrap 5
-- Angular 18
+- Angular 21
 - Typescript
 
 ## Other Technologies

README.md

@@ -21,7 +21,9 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "@angular/localize/init"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets", "src/fake-data"],

angular.json

@@ -1,7 +1,8 @@
 {
   "name": "datta-able-free-angular-admin-template",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "author": "CodedThemes",
+  "private": false,
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -13,45 +14,43 @@
     "lint:fix": "ng lint --fix",
     "prettier": "prettier --write ./src"
   },
-  "private": false,
   "dependencies": {
-    "@angular/animations": "20.0.5",
-    "@angular/cdk": "20.0.4",
-    "@angular/common": "20.0.5",
-    "@angular/compiler": "20.0.5",
-    "@angular/core": "20.0.5",
-    "@angular/forms": "20.0.5",
-    "@angular/localize": "20.0.5",
-    "@angular/platform-browser": "20.0.5",
-    "@angular/platform-browser-dynamic": "20.0.5",
-    "@angular/router": "20.0.5",
-    "@ng-bootstrap/ng-bootstrap": "19.0.0",
+    "@angular/animations": "21.0.5",
+    "@angular/cdk": "21.0.3",
+    "@angular/common": "21.0.5",
+    "@angular/compiler": "21.0.5",
+    "@angular/core": "21.0.5",
+    "@angular/forms": "21.0.5",
+    "@angular/localize": "21.0.5",
+    "@angular/platform-browser": "21.0.5",
+    "@angular/platform-browser-dynamic": "21.0.5",
+    "@angular/router": "21.0.5",
+    "@ng-bootstrap/ng-bootstrap": "20.0.0",
     "@popperjs/core": "2.11.8",
-    "apexcharts": "4.7.0",
-    "bootstrap": "5.3.7",
-    "ng-apexcharts": "1.16.0",
+    "apexcharts": "5.3.6",
+    "bootstrap": "5.3.8",
+    "ng-apexcharts": "2.0.4",
     "ngx-scrollbar": "18.0.0",
     "rxjs": "~7.8.2",
     "screenfull": "6.0.2",
-    "tslib": "2.8.1",
-    "zone.js": "~0.15.1"
+    "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.0.4",
-    "@angular-eslint/builder": "20.1.1",
-    "@angular-eslint/eslint-plugin": "20.1.1",
-    "@angular-eslint/eslint-plugin-template": "20.1.1",
-    "@angular-eslint/schematics": "20.1.1",
-    "@angular-eslint/template-parser": "20.1.1",
-    "@angular/cli": "20.0.4",
-    "@angular/compiler-cli": "20.0.5",
-    "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.29.0",
-    "@types/node": "24.0.4",
-    "@typescript-eslint/eslint-plugin": "8.35.0",
-    "@typescript-eslint/parser": "8.35.0",
-    "eslint": "9.29.0",
-    "prettier": "3.6.1",
-    "typescript": "5.8.3"
+    "@angular-devkit/build-angular": "21.0.3",
+    "@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.3",
+    "@angular/compiler-cli": "21.0.5",
+    "@eslint/eslintrc": "3.3.3",
+    "@eslint/js": "9.39.1",
+    "@types/node": "25.0.1",
+    "@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"
   }
 }

package.json

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

src/app/app.component.html

@@ -148,8 +148,8 @@ <h6 class="text-muted">
                   </h6>
                 </td>
                 <td>
-                  <a href="javascript:" class="badge me-2 theme-bg2 text-white f-12">Reject</a>
-                  <a href="javascript:" class="badge me-2 theme-bg text-white f-12">Approve</a>
+                  <a href="javascript:void(0)" class="badge me-2 theme-bg2 text-white f-12">Reject</a>
+                  <a href="javascript:void(0)" class="badge me-2 theme-bg text-white f-12">Approve</a>
                 </td>
               </tr>
             }

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

@@ -8,27 +8,73 @@
     </div>
     <div class="card">
       <div class="card-body text-center">
-        <div class="mb-4">
-          <i class="feather icon-unlock auth-icon"></i>
-        </div>
-        <h3 class="mb-4">Login</h3>
-        <div class="input-group mb-3">
-          <input type="email" class="form-control" placeholder="Email" />
-        </div>
-        <div class="input-group mb-4">
-          <input type="password" class="form-control" placeholder="Password" />
-        </div>
-        <div class="form-group text-start mb-4">
-          <div class="checkbox checkbox-fill d-inline">
-            <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-a1" checked="" />
-            <label for="checkbox-fill-a1" class="cr">Save Details</label>
+        <form (ngSubmit)="onSubmit($event)">
+          <div class="mb-4">
+            <i class="feather icon-unlock auth-icon"></i>
           </div>
-        </div>
-        <button class="btn btn-primary mb-4">Login</button>
-        <p class="mb-2 text-muted">
-          Forgot password?
-          <a href="javascript:">Reset</a>
-        </p>
+          <h3 class="mb-4">Login</h3>
+          <div class="input-group mb-3">
+            <input
+              type="email"
+              class="form-control"
+              id="floatingInput"
+              [class.is-invalid]="submitted() && loginForm.email().invalid()"
+              placeholder="Email Address"
+              [field]="loginForm.email"
+            />
+            @if (submitted() && loginForm.email().invalid()) {
+              <div class="invalid-feedback">
+                @for (error of loginForm.email().errors(); track error.kind) {
+                  <div>{{ error.message }}</div>
+                }
+              </div>
+            }
+          </div>
+          <div class="input-group mb-4">
+            @if (!showPassword()) {
+              <input
+                type="password"
+                id="password"
+                class="form-control"
+                [field]="loginForm.password"
+                [class.is-invalid]="submitted() && loginForm.password().errors().length > 0"
+                placeholder="Password (min. 8 characters)"
+              />
+            } @else {
+              <input
+                type="text"
+                id="password"
+                class="form-control"
+                [field]="loginForm.password"
+                [class.is-invalid]="submitted() && loginForm.password().errors().length > 0"
+                placeholder="Password (min. 8 characters)"
+              />
+            }
+            <i
+              [ngClass]="showPassword() ? 'feather icon-eye' : 'feather icon-eye-off'"
+              id="togglePassword"
+              (click)="togglePasswordVisibility()"
+            ></i>
+            @if (submitted() && loginForm.password().errors().length > 0) {
+              <div class="invalid-feedback">
+                @for (error of loginForm.password().errors(); track error.kind) {
+                  <div>{{ error.message }}</div>
+                }
+              </div>
+            }
+          </div>
+          <div class="form-group text-start">
+            <div class="checkbox checkbox-fill d-inline">
+              <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-a1" checked="" />
+              <label for="checkbox-fill-a1" class="cr">Save Details</label>
+            </div>
+          </div>
+          <button type="submit" class="btn btn-primary mb-4">Login</button>
+          <p class="mb-2 text-muted">
+            Forgot password?
+            <a [routerLink]="['#']">Reset</a>
+          </p>
+        </form>
         <p class="mb-0 text-muted">
           Don’t have an account?
           <a [routerLink]="['/register']">Sign up</a>

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

@@ -0,0 +1,12 @@
+#togglePassword {
+  cursor: pointer;
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  ::ng-deep.datta-rtl & {
+    right: auto;
+    left: 15px;
+  }
+}

src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss

@@ -1,10 +1,47 @@
-import { Component } from '@angular/core';
+// angular import
+import { ChangeDetectorRef, Component, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { email, Field, form, minLength, required } from '@angular/forms/signals';
+
+// project import
+import { SharedModule } from 'src/app/theme/shared/shared.module';
 
 @Component({
   selector: 'app-auth-signin',
-  imports: [RouterModule],
+  imports: [CommonModule, RouterModule, SharedModule, Field],
   templateUrl: './auth-signin.component.html',
   styleUrls: ['./auth-signin.component.scss']
 })
-export class AuthSigninComponent {}
+export class AuthSigninComponent {
+  private cd = inject(ChangeDetectorRef);
+
+  submitted = signal(false);
+  error = signal('');
+  showPassword = signal(false);
+
+  loginModal = signal<{ email: string; password: string }>({
+    email: '',
+    password: ''
+  });
+
+  loginForm = form(this.loginModal, (schemaPath) => {
+    required(schemaPath.email, { message: 'Email is required' });
+    email(schemaPath.email, { message: 'Enter a valid email address' });
+    required(schemaPath.password, { message: 'Password is required' });
+    minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' });
+  });
+
+  onSubmit(event: Event) {
+    this.submitted.set(true);
+    this.error.set('');
+    event.preventDefault();
+    const credentials = this.loginModal();
+    console.log('login user logged in with:', credentials);
+    this.cd.detectChanges();
+  }
+
+  togglePasswordVisibility() {
+    this.showPassword.set(!this.showPassword());
+  }
+}