Datta Able Angular- Documentation
Datta Able Angular 7 Documentation for your easy development.
Version : |
v1.0 |
Last Update : |
09-03-2019 |
Author : |
CodedThemes |
Datta Able v1.0 Installation
Quick Install -
- Update latest node - nodejs
- Update latest angular CLI global package to Angular 7+ with cli 7.2.2 - cli
- Copy complete packages to your project directory
- Install npm with command 'npm install'
- Compile project with command 'ng serve -o'
- Enjoy latest angular datta able
- Build project with command 'ng build --prod --aot'
Note: for more update guide go to - https://update.angular.io/
File Structure
datta-able-6.2.2/
├── e2e/..
├── node_modules/..
├── src/
│ ├── amcharts/..
│ ├── app/
│ │ ├── demo/
│ │ │ ├── app/
│ │ │ │ ├── gallery/..
│ │ │ │ ├── inline-chat/..
│ │ │ │ ├── task/..
│ │ │ │ ├── todo/..
│ │ │ ├── dashboard/
│ │ │ │ ├── dash-analytics/..
│ │ │ │ ├── dash-crm/..
│ │ │ │ ├── ...- More
│ │ │ ├── extension/
│ │ │ │ ├── editor/..
│ │ │ │ ├── files-upload/..
│ │ │ │ ├── full-event-calendar/..
│ │ │ │ ├── invoice/..
│ │ │ ├── extra/
│ │ │ │ ├── simple-page/..
│ │ │ ├── pages/
│ │ │ │ ├── authentication/
│ │ │ │ │ ├── auth-change-password/..
│ │ │ │ │ ├── auth-map-form/..
│ │ │ │ │ ├── ...- More
│ │ │ │ ├── core-chart/
│ │ │ │ │ ├── crt-amchart/..
│ │ │ │ │ ├── crt-chart-js/..
│ │ │ │ │ ├── crt-echart/..
│ │ │ │ │ ├── ...- More
│ │ │ │ │ ├── core-chart.module.ts
│ │ │ │ │ ├── core-chart-routing.module.ts
│ │ │ │ ├── ...- More
│ │ │ ├── ui-elements/
│ │ │ │ ├── ui-adv/
│ │ │ │ │ ├── adv-alert/..
│ │ │ │ │ ├── adv-datepicker/..
│ │ │ │ │ ├── ...- More
│ │ │ │ ├── ui-basic/
│ │ │ │ │ ├── basic-alert/..
│ │ │ │ │ ├── basic-badge/..
│ │ │ │ │ ├── ...- More
│ │ │ ├── widget/
│ │ │ │ ├── wget-charts/
│ │ │ │ ├── wget-data/
│ │ │ │ ├── ...- More
│ │ ├── fack-db/
│ │ │ ├── friends-list.ts
│ │ │ ├── user-chat.ts
│ │ ├── theme/
│ │ │ ├── layout/
│ │ │ │ ├── admin/
│ │ │ │ │ ├── configuration/..
│ │ │ │ │ ├── nav-bar/
│ │ │ │ │ │ ├── nav-left/
│ │ │ │ │ │ │ ├── nav-search/..
│ │ │ │ │ │ ├── nav-right/
│ │ │ │ │ │ │ ├── chat-msg/..
│ │ │ │ │ │ │ ├── chat-user-list/
│ │ │ │ │ │ │ │ ├── friend/..
│ │ │ │ │ ├── navigation/
│ │ │ │ │ │ ├── nav-content/
│ │ │ │ │ │ │ ├── nav-collapse/..
│ │ │ │ │ │ │ ├── nav-group/..
│ │ │ │ │ │ │ ├── nav-item/..
│ │ │ │ │ │ ├── nav-logo/..
│ │ │ │ ├── auth/..
│ │ │ ├── shared/
│ │ │ │ ├── components/
│ │ │ │ │ ├── alert/..
│ │ │ │ │ ├── /..breadcrumb/..
│ │ │ │ │ ├── ...- More
│ │ │ │ ├── shared.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── app.config.ts
│ │ ├── app-routing.module.ts
│ ├── assets/..
│ ├── environments/..
│ ├── fake-data/..
│ ├── scss/
│ │ ├── fonts/..
│ │ ├── layout/..
│ │ ├── ...- More
│ │ ├── _custom.scss
│ │ ├── _general.scss
│ │ ├── _generic.scss
│ │ ├── _variables.scss
│ ├── _index.html
│ ├── _main.ts
│ ├── ...- More
├── angular.json
├── package.json
├── ...- More
Page structure
- src/index.html
<!doctype html>
<html lang="en">
<head>
<title>Datta Able | Welcome To Angular 7+ Bootstrap Design Admin Template </title>
<!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 11]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<base href="/">
<!-- Meta Content-->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- font style -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
</head>
<body>
<app-root></app-root> <!-- app.component.html -->
</body>
</html>
- src/app/app.component.html
<router-outlet>
<!-- loadChildren from app-routing.module.ts with admin.component.html or auth.component.html -->
</router-outlet>
- src/app/app-routing.module.ts
import { AdminComponent } from './theme/layout/admin/admin.component';
import { AuthComponent } from './theme/layout/auth/auth.component';
const routes: Routes = [
{
path: '',
component: AdminComponent,
children: [
// load children modules with lazy load routing for header, side nav common structure, like, dashboard, blank page, widget, etc..
]
},
{
path: '',
component: AuthComponent,
children: [
// load children modules with lazy load routing for without common structure, like login, signup, reset password, lock screen, etc..
]
}
];
- src/app/theme/layout/admin/admin.component.html
<app-navigation></app-navigation> <!-- for side nav - navigation.component.html -->
<app-nav-bar></app-nav-bar> <!-- for header - nav-bar.component.html -->
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<div class="pcoded-content">
<div class="pcoded-inner-content">
<app-breadcrumb></app-breadcrumb> <!-- for common breadcrumb - breadcrumb.component.html -->
<div class="main-body">
<div class="page-wrapper">
<router-outlet>
<!-- page main body - loadChildren as main page body from src/app/demo/... -->
</router-outlet>
</div>
</div>
</div>
</div>
</div>
</div>
- src/app/theme/layout/auth/auth.component.html
<router-outlet>
<!-- loadChildren component for auth.component at app-routing.module.ts for authentication blank pages without nav, header, etc. -->
</router-outlet>
Template Layouts
You can edit this file at [ ../src/app/app-config.ts ]
| Layout | Description |
|---|---|
| Vertical |
|
| Horizontal |
|
| Pre Build Layout 2 |
|
| Pre Build Layout 2-2 |
|
| Pre Build Layout 3 |
|
| Pre Build Layout 4 |
|
| Pre Build Layout 4-2 |
|
| Pre Build Layout 6 |
|
| Pre Build Layout 8 |
|
| Static Layout |
|
| Fixed Layout |
|
| Navbar Fixed Layout |
|
| Collapse Menu Layout |
|
| Box Layout |
|
| RTL Layout |
|
| Light Layout |
|
| Dark Layout |
|
| Color Icon |
|
Configuration Options
| Option | Default | Type | Description |
|---|---|---|---|
| layout | vertical | string | vertical, horizontal |
| pre-layout | null | string | layout-2, layout-2-2, layout-3, layout-4, layout-4-2, layout-6, layout-8 |
| collapse-menu | false | boolean | false, true |
| layout-type | menu-dark | string | menu-dark, menu-light, dark |
| nav-icon-color | false | boolean | true, false |
| header-back-color | header-default | string | header-default, header-blue, header-red, header-purple, header-lightblue, header-dark |
| nav-back-color | navbar-default | string | navbar-default, navbar-blue, navbar-red, navbar-purple, navbar-lightblue, navbar-dark |
| nav-brand-color | brand-default | string | brand-default, brand-blue, brand-red, brand-purple, brand-lightblue, brand-dark |
| nav-back-image | null | string | navbar-image-1, navbar-image-2, navbar-image-3, navbar-image-4, navbar-image-5 |
| rtl-layout | false | boolean | false, true |
| nav-fixed-layout | true | boolean | false, true |
| header-fixed-layout | false | boolean | false, true |
| box-layout | false | boolean | false, true |
| nav-dropdown-icon | style1 | string | style1, style2, style3 |
| nav-list-icon | style1 | string | style1, style2, style3, style4, style5, style6 |
| nav-active-list-color | active-default | string | active-default, active-blue, active-red, active-purple, active-lightblue, active-dark |
| nav-list-title-color | title-default | string | title-default, title-blue, title-red, title-purple, title-lightblue, title-dark |
| nav-list-title-hide | false | boolean | false, true |
| layout-6-background | #23b7e5 | string |
Note: used only for pre-layout: layout-6
Background Color
Background Image
Background Pattern
|
Menu background
export class DattaConfig {
public static config = {
'nav-back-color': 'navbar-default'
};
}
export class DattaConfig {
public static config = {
'nav-back-color': 'navbar-blue'
};
}
export class DattaConfig {
public static config = {
'nav-back-color': 'navbar-red'
};
}
export class DattaConfig {
public static config = {
'nav-back-color': 'navbar-purple'
};
}
export class DattaConfig {
public static config = {
'nav-back-color': 'navbar-lightblue'
};
}
export class DattaConfig {
public static config = {
'nav-back-color': 'navbar-dark'
};
}
Menu background image
export class DattaConfig {
public static config = {
'nav-back-image': 'navbar-image-1'
};
}
export class DattaConfig {
public static config = {
'nav-back-image': 'navbar-image-2'
};
}
export class DattaConfig {
public static config = {
'nav-back-image': 'navbar-image-3'
};
}
export class DattaConfig {
public static config = {
'nav-back-image': 'navbar-image-4'
};
}
export class DattaConfig {
public static config = {
'nav-back-image': 'navbar-image-5'
};
}
Menu Active item background
export class DattaConfig {
public static config = {
'nav-active-list-color': 'active-default'
};
}
export class DattaConfig {
public static config = {
'nav-active-list-color': 'active-blue'
};
}
export class DattaConfig {
public static config = {
'nav-active-list-color': 'active-red'
};
}
export class DattaConfig {
public static config = {
'nav-active-list-color': 'active-purple'
};
}
export class DattaConfig {
public static config = {
'nav-active-list-color': 'active-lightblue'
};
}
export class DattaConfig {
public static config = {
'nav-active-list-color': 'active-dark'
};
}
Menu caption ( title ) color
export class DattaConfig {
public static config = {
'nav-list-title-color': 'title-default'
};
}
export class DattaConfig {
public static config = {
'nav-list-title-color': 'title-blue'
};
}
export class DattaConfig {
public static config = {
'nav-list-title-color': 'title-red'
};
}
export class DattaConfig {
public static config = {
'nav-list-title-color': 'title-purple'
};
}
export class DattaConfig {
public static config = {
'nav-list-title-color': 'title-lightblue'
};
}
export class DattaConfig {
public static config = {
'nav-list-title-color': 'title-dark'
};
}
Menu List Icon
export class DattaConfig {
public static config = {
'nav-list-icon': 'style1'
};
}
export class DattaConfig {
public static config = {
'nav-list-icon': 'style2'
};
}
export class DattaConfig {
public static config = {
'nav-list-icon': 'style3'
};
}
export class DattaConfig {
public static config = {
'nav-list-icon': 'style4'
};
}
export class DattaConfig {
public static config = {
'nav-list-icon': 'style5'
};
}
export class DattaConfig {
public static config = {
'nav-list-icon': 'style6'
};
}
Menu dropdown icon
export class DattaConfig {
public static config = {
'nav-dropdown-icon': 'style1'
};
}
export class DattaConfig {
public static config = {
'nav-dropdown-icon': 'style2'
};
}
export class DattaConfig {
public static config = {
'nav-dropdown-icon': 'style3'
};
}
RTL Layouts
export class DattaConfig {
public static config = {
'rtl-layout': true
};
}
Dark Layouts
export class DattaConfig {
public static config = {
'layout-type': 'dark'
};
}
SCSS
How to Compile SCSS?
You need to complile scss when you change scss using koala scss Compiler
List of variables for Datta able design
You can edit this file at [ ../src/scss/_variables.scss ]
// Top bar height
$header-height: 70px;
// Sidebar menu width
$Menu-width: 264px;
// Small menu width
$Menu-collapsed-width: 80px;
// Color list for Datta Able Admin Templet
// theme color variables
$theme-color: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%);
$theme-color2: linear-gradient(-135deg, #899FD4 0%, #A389D4 100%);
$primary-color: #04a9f5;
$warning-color: #f4c22b;
$danger-color: #f44236;
$success-color: #1de9b6;
$purple-color: #a389d4;
$info-color: #3ebfea;
$dark-color: #37474f;
$theme-border: #eaeaea;
// header colors
$brand-background: #3f4d67;
$header-dark-background: #3f4d67;
$header-dark-text-color: #fff;
$header-light-background: #fff;
$header-light-text-color: #3f4d67;
// Sidebar colors
$menu-caption-color: #14171d;
$menu-dark-background: #3f4d67;
$menu-dark-text-color: #a9b7d0;
$menu-light-background: #fff;
$menu-light-text-color: #3f4d67;
$menu-active-color: #04a9f5;
// dark layout colors
$dark-layout: #212224;
$dark-layout-font: #adb7be;
// Menu icon
$menu-icon-color: $primary-color, #ff5252, #01a9ac ,#9575CD , #23b7e5, $warning-color;
// Header background
$color-header-name: blue, red, purple, lightblue, dark;
$color-header-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);
// Menu background
$color-menu-name: blue, red, purple, lightblue, dark;
$color-menu-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);
// Active background color
$color-active-name: blue, red, purple, lightblue, dark;
$color-active-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);
// Menu title color
$color-title-name: blue, red, purple, lightblue, dark;
$color-title-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);
// basic variable
$theme-font-family: 'Open Sans', sans-serif;
$theme-font-size: 14px;
$theme-background: #f4f7fa;
$theme-font-color: #888;
$theme-heading-color: #111;
Plugins
FAQ
What is Datta Able?
Datta Able is responsive admin template/Dattaboard which useful for your complete entire projects like CRM system - Task System - User Management System - Social Dattaboard etc. Without any trouble Datta Able gives the perfect outcome with tons of ready made plugins which helps you at every step while creating any project.
Why choose Datta Able?
Datta Able built using angular 7+ and bootstrap's latest version 4 which have complete compatibility on bootstrap4. It is fully crafted for every one's need and its fullfilled those need too. Tons of Plugins, Forms, Charts, Tables, Custom Pages gives extra smoothness in project.
Licence terms?
Datta Able comes with single license usage and support for every single purchase. If you want to use Datta Able for multiple project you must buy the extra licence for that.
What about Item Support?
We only support those purchaser who purchased Datta Able. 6 months included support comes with every single purchase of Datta Able.
What is Support Turnaround time ?
When you comment or submit the ticket for support. Our team takes it very seriously and respond it within a Half or Full day.
How i rate the Datta Able ?
It just a simple. Go to your account. Then check your download section where you found Datta Able Template. Click on start ratings. Simple !!!
Version Change Log
v1.0
-----------
13-03-2019 - v1.0 Release