Angular 19 (#28)

* Angular 19 upgrade done and new folder structure add

* update readme file content

* readme file content update

Author: ct-dixit

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/app.module.ts

@@ -0,0 +1,24 @@
+**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.*
+
+Please continue reading below to explore the features of the Pro version:
+
+# 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/admin-panel/README.md

@@ -0,0 +1,24 @@
+**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.*
+
+Please continue reading below to explore the features of the Pro version:
+
+# 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!