Skip to content

Commit eb40a4a

Browse files
Sample for a dashboard layout with ui components
1 parent 815c654 commit eb40a4a

8 files changed

+288
-2
lines changed

.editorconfig

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

.gitignore

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

README.md

+27-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,27 @@
1-
# designing-an-angular-dashboard-layout-with-ui-components
2-
A quick-start Angular project that contains code to add UI components to the Angular Dashboard Layout and arrange panels using the cell spacing property. This project also contains code to customize the look of the dashboard using the CSS class property, floating panels and the responsive and adaptive layouts functionality of the dashboard.
1+
# DashBoardLayoutUiComponents
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.7.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8+
9+
## Code scaffolding
10+
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24+
25+
## Further help
26+
27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

angular.json

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"dashBoardLayoutUiComponents": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:application",
15+
"options": {
16+
"outputPath": "dist/dash-board-layout-ui-components",
17+
"index": "src/index.html",
18+
"browser": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
{
25+
"glob": "**/*",
26+
"input": "public"
27+
}
28+
],
29+
"styles": [
30+
"src/styles.css"
31+
],
32+
"scripts": []
33+
},
34+
"configurations": {
35+
"production": {
36+
"budgets": [
37+
{
38+
"type": "initial",
39+
"maximumWarning": "500kB",
40+
"maximumError": "1MB"
41+
},
42+
{
43+
"type": "anyComponentStyle",
44+
"maximumWarning": "2kB",
45+
"maximumError": "4kB"
46+
}
47+
],
48+
"outputHashing": "all"
49+
},
50+
"development": {
51+
"optimization": false,
52+
"extractLicenses": false,
53+
"sourceMap": true
54+
}
55+
},
56+
"defaultConfiguration": "production"
57+
},
58+
"serve": {
59+
"builder": "@angular-devkit/build-angular:dev-server",
60+
"configurations": {
61+
"production": {
62+
"buildTarget": "dashBoardLayoutUiComponents:build:production"
63+
},
64+
"development": {
65+
"buildTarget": "dashBoardLayoutUiComponents:build:development"
66+
}
67+
},
68+
"defaultConfiguration": "development"
69+
},
70+
"extract-i18n": {
71+
"builder": "@angular-devkit/build-angular:extract-i18n"
72+
},
73+
"test": {
74+
"builder": "@angular-devkit/build-angular:karma",
75+
"options": {
76+
"polyfills": [
77+
"zone.js",
78+
"zone.js/testing"
79+
],
80+
"tsConfig": "tsconfig.spec.json",
81+
"assets": [
82+
{
83+
"glob": "**/*",
84+
"input": "public"
85+
}
86+
],
87+
"styles": [
88+
"src/styles.css"
89+
],
90+
"scripts": []
91+
}
92+
}
93+
}
94+
}
95+
},
96+
"cli": {
97+
"analytics": "3a961382-e0c5-402a-9540-83382b441930"
98+
}
99+
}

package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "dash-board-layout-ui-components",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^18.0.0",
14+
"@angular/common": "^18.0.0",
15+
"@angular/compiler": "^18.0.0",
16+
"@angular/core": "^18.0.0",
17+
"@angular/forms": "^18.0.0",
18+
"@angular/platform-browser": "^18.0.0",
19+
"@angular/platform-browser-dynamic": "^18.0.0",
20+
"@angular/router": "^18.0.0",
21+
"@syncfusion/ej2-angular-charts": "^26.1.40",
22+
"@syncfusion/ej2-angular-grids": "^26.1.40",
23+
"@syncfusion/ej2-angular-layouts": "^26.1.38",
24+
"rxjs": "~7.8.0",
25+
"tslib": "^2.3.0",
26+
"zone.js": "~0.14.3"
27+
},
28+
"devDependencies": {
29+
"@angular-devkit/build-angular": "^18.0.7",
30+
"@angular/cli": "^18.0.7",
31+
"@angular/compiler-cli": "^18.0.0",
32+
"@types/jasmine": "~5.1.0",
33+
"jasmine-core": "~5.1.0",
34+
"karma": "~6.4.0",
35+
"karma-chrome-launcher": "~3.2.0",
36+
"karma-coverage": "~2.2.0",
37+
"karma-jasmine": "~5.1.0",
38+
"karma-jasmine-html-reporter": "~2.1.0",
39+
"typescript": "~5.4.2"
40+
}
41+
}

tsconfig.app.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3+
{
4+
"extends": "./tsconfig.json",
5+
"compilerOptions": {
6+
"outDir": "./out-tsc/app",
7+
"types": []
8+
},
9+
"files": [
10+
"src/main.ts"
11+
],
12+
"include": [
13+
"src/**/*.d.ts"
14+
]
15+
}

tsconfig.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3+
{
4+
"compileOnSave": false,
5+
"compilerOptions": {
6+
"outDir": "./dist/out-tsc",
7+
"strict": true,
8+
"noImplicitOverride": true,
9+
"noPropertyAccessFromIndexSignature": true,
10+
"noImplicitReturns": true,
11+
"noFallthroughCasesInSwitch": true,
12+
"skipLibCheck": true,
13+
"esModuleInterop": true,
14+
"sourceMap": true,
15+
"declaration": false,
16+
"experimentalDecorators": true,
17+
"moduleResolution": "bundler",
18+
"importHelpers": true,
19+
"target": "ES2022",
20+
"module": "ES2022",
21+
"useDefineForClassFields": false,
22+
"lib": [
23+
"ES2022",
24+
"dom"
25+
]
26+
},
27+
"angularCompilerOptions": {
28+
"enableI18nLegacyMessageIdFormat": false,
29+
"strictInjectionParameters": true,
30+
"strictInputAccessModifiers": true,
31+
"strictTemplates": true
32+
}
33+
}

tsconfig.spec.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3+
{
4+
"extends": "./tsconfig.json",
5+
"compilerOptions": {
6+
"outDir": "./out-tsc/spec",
7+
"types": [
8+
"jasmine"
9+
]
10+
},
11+
"include": [
12+
"src/**/*.spec.ts",
13+
"src/**/*.d.ts"
14+
]
15+
}

0 commit comments

Comments
 (0)