5 |
16 |
6 |
15 |
7 |
14 |
8 | Google Maps
9 |
10 |
11 |
12 |
13 |
54 |
55 |
68 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { MaterialDashboardAngularPage } from './app.po';
2 |
3 | describe('material-dashboard-angular App', () => {
4 | let page: MaterialDashboardAngularPage;
5 |
6 | beforeEach(() => {
7 | page = new MaterialDashboardAngularPage();
8 | });
9 |
10 | it('should display message saying app works', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('app works!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, element, by } from 'protractor';
2 |
3 | export class MaterialDashboardAngularPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/e2e",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types":[
8 | "jasmine",
9 | "node"
10 | ]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/genezio.yaml:
--------------------------------------------------------------------------------
1 | name: now-ui-dashboard-angular
2 | region: us-east-1
3 | frontend:
4 | # Specifies the path of your code.
5 | path: .
6 | # Specifies the folder where the build is located.
7 | # This is the folder that will be deployed.
8 | publish: dist
9 | # Scripts will run in the specified `path` folder.
10 | scripts:
11 | # The command to build your frontend project. This is custom to your project.
12 | # It must to populate the specified `publish` folder with a `index.html` file.
13 | deploy:
14 | - npm install --legacy-peer-deps
15 | - npm run build
16 | yamlVersion: 2
17 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | files: [
19 |
20 | ],
21 | preprocessors: {
22 |
23 | },
24 | mime: {
25 | 'text/x-typescript': ['ts','tsx']
26 | },
27 | coverageIstanbulReporter: {
28 | dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
29 | fixWebpackSourcePaths: true
30 | },
31 |
32 | reporters: config.angularCli && config.angularCli.codeCoverage
33 | ? ['progress', 'coverage-istanbul']
34 | : ['progress', 'kjhtml'],
35 | port: 9876,
36 | colors: true,
37 | logLevel: config.LOG_INFO,
38 | autoWatch: true,
39 | browsers: ['Chrome'],
40 | singleRun: false
41 | });
42 | };
43 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "now-ui-dashboard-angular",
3 | "version": "1.4.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "build": "cross-env CI=false ng build",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e",
12 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
13 | },
14 | "private": true,
15 | "dependencies": {
16 | "@adactive/bootstrap-tagsinput": "0.8.2",
17 | "@angular/animations": "^13.2.6",
18 | "@angular/cdk": "^13.2.6",
19 | "@angular/common": "^13.2.6",
20 | "@angular/compiler": "^13.2.6",
21 | "@angular/core": "^13.2.6",
22 | "@angular/elements": "^13.2.6",
23 | "@angular/forms": "^13.2.6",
24 | "@angular/google-maps": "^13.3.3",
25 | "@angular/localize": "^13.2.6",
26 | "@angular/material": "^13.2.6",
27 | "@angular/platform-browser": "^13.2.6",
28 | "@angular/platform-browser-dynamic": "^13.2.6",
29 | "@angular/router": "^13.2.6",
30 | "@ng-bootstrap/ng-bootstrap": "12.0.1",
31 | "@popperjs/core": "^2.11.4",
32 | "ajv": "7.0.1",
33 | "ajv-keywords": "4.0.0",
34 | "bootstrap": "4.5.3",
35 | "chart.js": "2.9.4",
36 | "chartist": "0.11.4",
37 | "classlist.js": "1.1.20150312",
38 | "copy-webpack-plugin": "7.0.0",
39 | "core-js": "3.8.1",
40 | "font-awesome": "4.7.0",
41 | "hammerjs": "2.0.8",
42 | "jquery": "3.5.1",
43 | "jw-bootstrap-switch-ng2": "2.0.5",
44 | "ng2-charts": "2.4.2",
45 | "ngx-toastr": "13.2.0",
46 | "nouislider": "14.6.3",
47 | "perfect-scrollbar": "1.5.0",
48 | "popper.js": "1.16.1",
49 | "rellax": "1.12.1",
50 | "rxjs": "^6.5.4",
51 | "rxjs-compat": "6.6.7",
52 | "web-animations-js": "2.3.2",
53 | "zone.js": "~0.11.5"
54 | },
55 | "devDependencies": {
56 | "@angular-devkit/build-angular": "^13.2.6",
57 | "@angular/cli": "^13.2.6",
58 | "@angular/compiler-cli": "^13.2.6",
59 | "@angular/language-service": "13.2.6",
60 | "@types/jasmine": "~3.10.3",
61 | "@types/jasminewd2": "~2.0.10",
62 | "@types/node": "^17.0.21",
63 | "codelyzer": "6.0.2",
64 | "jasmine-core": "~4.0.1",
65 | "jasmine-spec-reporter": "~7.0.0",
66 | "karma": "^6.3.17",
67 | "karma-chrome-launcher": "~3.1.1",
68 | "karma-coverage": "^2.2.0",
69 | "karma-coverage-istanbul-reporter": "~3.0.3",
70 | "karma-jasmine": "~4.0.1",
71 | "karma-jasmine-html-reporter": "^1.7.0",
72 | "protractor": "7.0.0",
73 | "ts-node": "~10.7.0",
74 | "typescript": "~4.4.2",
75 | "@types/bootstrap": "5.0.1",
76 | "@types/chartist": "0.11.0",
77 | "@types/googlemaps": "3.40.5",
78 | "@types/jquery": "3.5.5",
79 | "cross-env": "^7.0.3"
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './e2e/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | beforeLaunch: function() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | },
27 | onPrepare() {
28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-angular/267e394311c33006317423a92e2ec935df506259/src/app/app.component.css
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
56 |
67 |
57 |
65 |
66 |
3 |
4 |
12 |
22 |
--------------------------------------------------------------------------------
/src/app/components/sidebar/sidebar.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SidebarComponent } from './sidebar.component';
4 |
5 | describe('SidebarComponent', () => {
6 | let component: SidebarComponent;
7 | let fixture: ComponentFixture
5 | 
6 |
7 |
8 |
9 | Creative Tim
10 |
11 |
6 |
2 |
5 |
11 |
--------------------------------------------------------------------------------
/src/app/layouts/admin-layout/admin-layout.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-angular/267e394311c33006317423a92e2ec935df506259/src/app/layouts/admin-layout/admin-layout.component.scss
--------------------------------------------------------------------------------
/src/app/layouts/admin-layout/admin-layout.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminLayoutComponent } from './admin-layout.component';
4 |
5 | describe('AdminLayoutComponent', () => {
6 | let component: AdminLayoutComponent;
7 | let fixture: ComponentFixture
6 |
10 |
2 |
3 |
4 |
17 |
--------------------------------------------------------------------------------
/src/app/maps/maps.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { MapsComponent } from './maps.component';
4 |
5 | describe('MapsComponent', () => {
6 | let component: MapsComponent;
7 | let fixture: ComponentFixture
2 |
9 |
3 |
8 | Notifications
4 |Please checkout the 5 | full documentation. 6 |
7 |
10 |
135 |
--------------------------------------------------------------------------------
/src/app/notifications/notifications.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { NotificationsComponent } from './notifications.component';
4 |
5 | describe('NotificationsComponent', () => {
6 | let component: NotificationsComponent;
7 | let fixture: ComponentFixture
11 |
134 |
12 |
43 |
13 |
42 |
14 |
16 | Notifications Style
15 |
17 |
41 |
18 | This is a plain notification
19 |
20 |
21 |
24 | This is a notification with close button.
25 |
26 |
33 |
40 |
44 |
87 |
45 |
86 |
46 |
48 | Notification states
47 |
49 |
85 |
50 |
53 |
54 | Primary - This is a regular notification made with ".alert-primary"
55 |
56 |
57 |
60 |
61 | Info - This is a regular notification made with ".alert-info"
62 |
63 |
64 |
67 |
68 | Success - This is a regular notification made with ".alert-success"
69 |
70 |
71 |
74 |
75 | Warning - This is a regular notification made with ".alert-warning"
76 |
77 |
78 |
81 |
82 | Danger - This is a regular notification made with ".alert-danger"
83 |
84 |
88 |
133 |
89 |
132 |
90 |
130 |
131 |
2 |
3 |
4 |
262 |
--------------------------------------------------------------------------------
/src/app/table-list/table-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TableListComponent } from './table-list.component';
4 |
5 | describe('TableListComponent', () => {
6 | let component: TableListComponent;
7 | let fixture: ComponentFixture
5 |
261 |
6 |
132 |
7 |
131 |
8 |
10 | Simple Table
9 |
11 |
130 |
12 |
13 |
14 |
128 |
129 | | 15 | Name 16 | | 17 |18 | Country 19 | | 20 |21 | City 22 | | 23 |24 | Salary 25 | | 26 | 27 | 28 |
|---|---|---|---|
| 30 | Dakota Rice 31 | | 32 |33 | Niger 34 | | 35 |36 | Oud-Turnhout 37 | | 38 |39 | $36,738 40 | | 41 |
| 44 | Minerva Hooper 45 | | 46 |47 | Curaçao 48 | | 49 |50 | Sinaai-Waas 51 | | 52 |53 | $23,789 54 | | 55 |
| 58 | Sage Rodriguez 59 | | 60 |61 | Netherlands 62 | | 63 |64 | Baileux 65 | | 66 |67 | $56,142 68 | | 69 |
| 72 | Philip Chaney 73 | | 74 |75 | Korea, South 76 | | 77 |78 | Overland Park 79 | | 80 |81 | $38,735 82 | | 83 |
| 86 | Doris Greene 87 | | 88 |89 | Malawi 90 | | 91 |92 | Feldkirchen in Kärnten 93 | | 94 |95 | $63,542 96 | | 97 |
| 100 | Mason Porter 101 | | 102 |103 | Chile 104 | | 105 |106 | Gloucester 107 | | 108 |109 | $78,615 110 | | 111 |
| 114 | Jon Porter 115 | | 116 |117 | Portugal 118 | | 119 |120 | Gloucester 121 | | 122 |123 | $98,615 124 | | 125 |
133 |
260 |
134 |
259 |
135 |
138 | Table on Plain Background
136 |Here is a subtitle for this table
137 |
139 |
258 |
140 |
141 |
142 |
256 |
257 | | 143 | Name 144 | | 145 |146 | Country 147 | | 148 |149 | City 150 | | 151 |152 | Salary 153 | | 154 | 155 | 156 |
|---|---|---|---|
| 158 | Dakota Rice 159 | | 160 |161 | Niger 162 | | 163 |164 | Oud-Turnhout 165 | | 166 |167 | $36,738 168 | | 169 |
| 172 | Minerva Hooper 173 | | 174 |175 | Curaçao 176 | | 177 |178 | Sinaai-Waas 179 | | 180 |181 | $23,789 182 | | 183 |
| 186 | Sage Rodriguez 187 | | 188 |189 | Netherlands 190 | | 191 |192 | Baileux 193 | | 194 |195 | $56,142 196 | | 197 |
| 200 | Philip Chaney 201 | | 202 |203 | Korea, South 204 | | 205 |206 | Overland Park 207 | | 208 |209 | $38,735 210 | | 211 |
| 214 | Doris Greene 215 | | 216 |217 | Malawi 218 | | 219 |220 | Feldkirchen in Kärnten 221 | | 222 |223 | $63,542 224 | | 225 |
| 228 | Mason Porter 229 | | 230 |231 | Chile 232 | | 233 |234 | Gloucester 235 | | 236 |237 | $78,615 238 | | 239 |
| 242 | Jon Porter 243 | | 244 |245 | Portugal 246 | | 247 |248 | Gloucester 249 | | 250 |251 | $98,615 252 | | 253 |
2 |
3 |
4 |
100 |
--------------------------------------------------------------------------------
/src/app/typography/typography.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TypographyComponent } from './typography.component';
4 |
5 | describe('TypographyComponent', () => {
6 | let component: TypographyComponent;
7 | let fixture: ComponentFixture
5 |
99 |
6 |
98 |
7 |
97 |
8 |
11 | Now Ui Table Heading
9 |Created using Montserrat Font Family
10 |
12 |
96 |
13 |
16 | 14 | Header 1The Life of Now Ui Dashboard
15 |
17 |
20 | 18 | Header 2The Life of Now Ui Dashboard
19 |
21 |
24 | 22 | Header 3The Life of Now Ui Dashboard
23 |
25 |
28 | 26 | Header 4The Life of Now Ui Dashboard
27 |
29 |
32 | 30 | Header 5The Life of Now Ui Dashboard
31 |
33 |
36 | 34 | Header 6The Life of Now Ui Dashboard
35 |
37 |
42 | 38 | Paragraph 39 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. 40 |
41 |
43 | Quote
44 |
55 | 45 |54 |46 | "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at." 47 |
53 |
48 |
49 | 50 | - Noaa 51 | 52 |
56 | Muted Text
57 |
61 | 58 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... 59 |
60 |
62 | Primary Text
63 |
66 | 64 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
65 |
67 | Info Text
68 |
71 | 69 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
70 |
72 | Success Text
73 |
76 | 74 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
75 |
77 | Warning Text
78 |
82 | 79 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... 80 |
81 |
83 | Danger Text
84 |
87 | 85 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
86 |
88 |
89 | Small Tag
90 | Header with small subtitle
91 |
94 |
95 |
89 | Small Tag
90 | Header with small subtitle
91 |
92 | Use "small" tag for the headers
93 |
94 |
2 |
3 |
4 |
82 |
--------------------------------------------------------------------------------
/src/app/upgrade/upgrade.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-angular/267e394311c33006317423a92e2ec935df506259/src/app/upgrade/upgrade.component.scss
--------------------------------------------------------------------------------
/src/app/upgrade/upgrade.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UpgradeComponent } from './upgrade.component';
4 |
5 | describe('UpgradeComponent', () => {
6 | let component: UpgradeComponent;
7 | let fixture: ComponentFixture
5 |
81 |
6 |
80 |
7 |
79 |
8 |
11 | Now UI Dashboard PRO Angular
9 |Are you looking for more components? Please check our Premium Version of Now UI Dashboard PRO Angular.
10 |
12 |
78 |
13 |
14 |
15 |
76 |
77 | | 16 | | Free | 17 |PRO | 18 | 19 | 20 |
|---|---|---|
| Components | 22 |16 | 23 |160 | 24 |
| Plugins | 27 |4 | 28 |12 | 29 |
| Example Pages | 32 |7 | 33 |27 | 34 |
| Documentation | 37 |38 | | 39 | |
| SASS Files | 42 |43 | | 44 | |
| Mini Sidebar | 47 |48 | | 49 | |
| Premium Support | 52 |53 | | 54 | |
| Login, Register, Pricing, Lock Pages | 57 |58 | | 59 | |
| 62 | | Free | 63 |Just $59 | 64 |
| 67 | | 68 | Current Version 69 | | 70 |71 | Upgrade to PRO 72 | | 73 |
2 |
3 |
4 |
123 |
--------------------------------------------------------------------------------
/src/app/user-profile/user-profile.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserProfileComponent } from './user-profile.component';
4 |
5 | describe('UserProfileComponent', () => {
6 | let component: UserProfileComponent;
7 | let fixture: ComponentFixture
5 |
122 |
6 |
86 |
7 |
85 |
8 |
10 | Edit Profile
9 |
11 |
83 |
84 |
87 |
121 |
88 |
108 | 119 |
120 |
89 | 
90 |
91 |
90 |
92 |
107 |
93 |
94 | 
95 |
101 |
95 | Mike Andrew
96 | 97 |98 | michael24 99 |
100 |
102 | "Lamborghini Mercy
103 |
Your chick she so thirsty
104 |
I'm in that two seat Lambo"
105 |
108 | 119 |