Angular 19

angular.json

@@ -17,16 +17,27 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": ["apexcharts"],
+            "allowedCommonJsDependencies": [
+              "apexcharts"
+            ],
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets", "src/fake-data"],
-            "styles": ["node_modules/bootstrap/scss/bootstrap.scss", "src/styles.scss"],
-            "scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"]
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/fake-data"
+            ],
+            "styles": [
+              "node_modules/bootstrap/scss/bootstrap.scss",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/apexcharts/dist/apexcharts.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -87,15 +98,32 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
   "cli": {
-    "analytics": "0eaad924-6e2a-434b-aad5-51d9f46776fc"
+    "analytics": "0eaad924-6e2a-434b-aad5-51d9f46776fc",
+    "schematicCollections": [
+      "angular-eslint"
+    ]
   }
 }

eslint.config.mjs

@@ -0,0 +1,46 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    ignores: ["projects/**/*"],
+}, ...compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@angular-eslint/recommended",
+    "plugin:@angular-eslint/template/process-inline-templates",
+).map(config => ({
+    ...config,
+    files: ["**/*.ts"],
+})), {
+    files: ["**/*.ts"],
+
+    rules: {
+        "@angular-eslint/directive-selector": ["error", {
+            type: "attribute",
+            prefix: "app",
+            style: "camelCase",
+        }],
+
+        "@angular-eslint/component-selector": ["error", {
+            type: "element",
+            prefix: "app",
+            style: "kebab-case",
+        }],
+    },
+}, ...compat.extends("plugin:@angular-eslint/template/recommended").map(config => ({
+    ...config,
+    files: ["**/*.html"],
+})), {
+    files: ["**/*.html"],
+    rules: {},
+}];

package.json

@@ -8,44 +8,53 @@
     "build": "ng build",
     "build-prod": "ng build --configuration production --base-href /demos/admin-templates/datta-able/angular/free/",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint",
+    "lint:fix": "ng lint --fix",
+    "prettier": "prettier --write ./src"
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^18.0.5",
-    "@angular/cdk": "^18.0.5",
-    "@angular/common": "^18.0.5",
-    "@angular/compiler": "^18.0.5",
-    "@angular/core": "^18.0.5",
-    "@angular/forms": "^18.0.5",
-    "@angular/localize": "^18.0.5",
-    "@angular/platform-browser": "^18.0.5",
-    "@angular/platform-browser-dynamic": "^18.0.5",
-    "@angular/router": "^18.0.5",
-    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
-    "@popperjs/core": "^2.11.8",
-    "apexcharts": "^3.49.2",
-    "bootstrap": "^5.3.3",
-    "ng-apexcharts": "^1.11.0",
-    "ngx-scrollbar": "^15.0.1",
+    "@angular/animations": "19.0.5",
+    "@angular/cdk": "19.0.4",
+    "@angular/common": "19.0.5",
+    "@angular/compiler": "19.0.5",
+    "@angular/core": "19.0.5",
+    "@angular/forms": "19.0.5",
+    "@angular/localize": "19.0.5",
+    "@angular/platform-browser": "19.0.5",
+    "@angular/platform-browser-dynamic": "19.0.5",
+    "@angular/router": "19.0.5",
+    "@ng-bootstrap/ng-bootstrap": "18.0.0",
+    "@popperjs/core": "2.11.8",
+    "apexcharts": "3.49.2",
+    "bootstrap": "5.3.3",
+    "ng-apexcharts": "1.11.0",
+    "ngx-scrollbar": "16.1.1",
     "rxjs": "~7.8.1",
-    "screenfull": "^6.0.2",
-    "tslib": "^2.6.3",
-    "zone.js": "~0.14.7"
+    "screenfull": "6.0.2",
+    "tslib": "2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.6",
-    "@angular/cli": "~18.0.6",
-    "@angular/compiler-cli": "^18.0.5",
-    "@types/jasmine": "~5.1.4",
-    "@types/node": "^20.14.9",
-    "jasmine-core": "~5.1.2",
-    "karma": "~6.4.3",
+    "@angular-devkit/build-angular": "19.0.6",
+    "@angular/cli": "19.0.6",
+    "@angular/compiler-cli": "19.0.5",
+    "@eslint/eslintrc": "3.2.0",
+    "@eslint/js": "9.17.0",
+    "@types/jasmine": "~5.1.5",
+    "@types/lodash": "4.17.13",
+    "@types/node": "22.10.2",
+    "angular-eslint": "19.0.2",
+    "eslint": "^9.16.0",
+    "jasmine-core": "~5.5.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "3.3.2",
-    "typescript": "5.4"
+    "prettier": "3.4.2",
+    "typescript": "5.6.3",
+    "typescript-eslint": "8.18.0"
   }
-}
+}

src/app/app-config.ts

@@ -1,4 +0,0 @@
-export class DattaConfig {
-  static layout: string = 'vertical';
-  static isCollapseMenu: Boolean = false;
-}

src/app/app-routing.module.ts

@@ -15,7 +15,7 @@ const routes: Routes = [
       },
       {
         path: 'dashboard',
-        loadComponent: () => import('./demo/dashboard/dashboard.component')
+        loadComponent: () => import('./demo/dashboard/dashboard.component').then((c) => c.DashboardComponent)
       },
       {
         path: 'basic',
@@ -31,7 +31,7 @@ const routes: Routes = [
       },
       {
         path: 'apexchart',
-        loadComponent: () => import('./demo/chart/apex-chart/apex-chart.component')
+        loadComponent: () => import('./demo/pages/core-chart/apex-chart/apex-chart.component')
       },
       {
         path: 'sample-page',

src/app/app.component.ts

@@ -1,16 +1,22 @@
-import { Component, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+// Angular import
+import { Component, OnInit, inject } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+
+// project import
+import { SpinnerComponent } from './theme/shared/components/spinner/spinner.component';
 
 @Component({
   selector: 'app-root',
+  imports: [SpinnerComponent, RouterModule],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  title = 'datta-able';
+  private router = inject(Router);
 
-  constructor(private router: Router) {}
+  title = 'datta-able';
 
+  // life cycle hook
   ngOnInit() {
     this.router.events.subscribe((evt) => {
       if (!(evt instanceof NavigationEnd)) {

src/app/demo/admin-panel/README.md

@@ -0,0 +1,20 @@
+# Datta Able Admin Panel - Unlock Premium Features with the Pro Version
+
+Looking for more advanced features and pages? This page(folder) is part of the premium version of our <b>4.0.0</b> template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level!
+
+## Included in the Pro Version:
+
+- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations.
+- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development.
+- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management.
+- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components.
+- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design.
+- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options.
+- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management.
+- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually.
+- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery.
+- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager.
+- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback.
+- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages.
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience!

src/app/demo/application/README.md

@@ -0,0 +1,20 @@
+# Datta Able Admin Panel - Unlock Premium Features with the Pro Version
+
+Looking for more advanced features and pages? This page(folder) is part of the premium version of our <b>4.0.0</b> template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level!
+
+## Included in the Pro Version:
+
+- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations.
+- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development.
+- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management.
+- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components.
+- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design.
+- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options.
+- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management.
+- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually.
+- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery.
+- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager.
+- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback.
+- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages.
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience!