Introduction


Nice Angular Dashboard Template is made with Angular 7+ CLI. This documentation will help you to understand template’s structure and how to edit. Please follow it very carefully to find out how template works and how you can edit things. You should have knowledge of Angular, CSS and HTML to be able to modify this template.

Support does include:

  • Answering your questions or problems regarding the template.
  • Giving solution to the Bugs reported.

Support does not include:

  • Custmaization Work
  • Any Installation Work
  • Support for any Third Party Plugins / Software
  • Support or Guide for How to integrate with any technologies (like PHP, dotnet, Java etc)

Before creating ticket, please make sure your question is regarding support only and not for custmaization and also follow full documentation to make sure the question / bug you are posting is not mentioned in documentation.

We at WrapPixel offers affordable custmaization services for our templates. For any custmaization work, please email us at [email protected].

Please give 5 star rating to our template, as rating will help other people to trust our template.


Dependencies


Browser Support

Nice angular is built to work in the latest desktop and mobile and tablet browsers.

  • Chrome (latest)
  • FireFox (latest)
  • Safari (latest)
  • Opera (latest)
  • Edge (latest)

Getting Started


  • Node.js and NPM : You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js.
  • angular-cli : You can install angular-cli by executing from your command window npm install -g @angular/cli . More details can be found here https://github.com/angular/angular-cli.

NPM Packages

  • Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

Development Server

  • Run ng serve for a dev server. Navigate to http://localhost:4200/ . The app will automatically reload if you change any of the source files.

Building

  • Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

More Help

  • To get more help on the angular-cli use ng --help or go check out the Angular-CLI README .

Folder Structure


The src folder
                                        
        src/
        ├── app/
        |   ├── app.component.css
        |   ├── app.component.html
        |   ├── app.component.spec.ts
        |   ├── app.component.ts
        |   └── app.module.ts
        ├── assets/
        |   └── .gitkeep
        ├── environments/
        |   ├── environment.prod.ts
        |   └── environment.ts
        ├── browserslist
        ├── favicon.ico
        ├── index.html
        ├── karma.conf.js
        ├── main.ts
        ├── polyfills.ts
        ├── styles.css
        ├── test.ts
        ├── tsconfig.app.json
        ├── tsconfig.spec.json
        └── tslint.json

                                        
                                    

The root folder
                                        
        main/
        ├── e2e/
        |   ├── app.e2e-spec.ts
        |   ├── app.po.ts
        |   └── tsconfig.e2e.json
        ├── node_modules/...
        ├── src/...
        ├── .editorconfig
        ├── .gitignore
        ├── angular.json
        ├── package.json
        ├── package-lock.json
        ├── README.md
        ├── tsconfig.json
        └── tslint.json
                                        
                                    

Layouts


There are two types of layouts used in this template.


Full Layout

This layout is used for inner pages which consists header, left sidebar, customizer etc...


Blank Layout

This layout is used for authentication pages like login, register, lockscreen, forgot password which doesn't consist any of the elements that are used in the inner pages.

Style Customization


Scss folder

Scss folder is inside src/assets/ folder.

                                        
        scss/
        ├── bootstrap/
        ├── core/
        ├── icons/
        ├── mixins/
        ├── pages/
        ├── rtl/
        ├── theme-colors/
        ├── widgets/
        ├── components.scss
        ├── custom.scss
        ├── pages.scss
        ├── responsive.scss
        ├── style.scss
        ├── variables.scss
                                        
                                    
# Folder/Files Details
1 bootstrap bootstrap/ folder contains all the default bootstrap components scss files.
2 core core/ folder contains all the required core scss files.
3 icons icons/ folder contains all the icons scss files used in the template.
4 mixins mixins/ folder contains custom mixin scss files.
5 pages pages/ folder contains various page templates css of the theme.
6 rtl rtl/ folder contains rtl scss files.
7 theme-colors theme-colors/ folder contains color scss file and dark theme scss file.
8 widgets widgets/ folder contains all the scss of the widgets designed in the theme.
9 components.scss imports rtl, dark, mixins and core scss files.
10 custom.scss you can write your own scss here.
11 pages.scss imports all the pages scss files.
12 Responsive.scss contains responsive layout scss of the theme.
13 style.scss imports all the other scss files and compiles them into single style.min.css
14 variable.scss contains all the variables used in the scss files of the theme.

Icons


Below is the table of icon fonts used in this template.

Icon Name Example
Font-awesome <i class="far/fas/fab fa-icon-name"></i>
Material Icons <i class="mdi mdi-icon-name"></i>
Simple Line Icons <i class="icon-name_of_icon"></i>
Themify Icons <i class="ti-icon-name"></i>
Weather Icons <i class="wi wi-icon-name"></i>
Flag Icons <i class="flag-icon flag-icon-country-name"></i>
Crypto Icons <i class="cc coin-name" title="coin-name"></i>

Menu Structure


A modern responsive menu.


Label Config

To add a label above certain group of menu-items, do as the following example:

                                        
{
    path: '', 
    title: 'Personal',           // name of the label
    icon: '', 
    class: 'nav-small-cap',      // this class is necessary
    label: '', 
    labelClass: '', 
    extralink: true, 
    submenu: []
}
                                        
                                    

Single Menu Config

To add single menu item, do as the following example:

                                        
{
    path: '/widgets',             
    title: 'Widgets',             // menu title
    icon: 'mdi mdi-widgets',      // menu icon
    class: '',                    // additional classes
    label: '', 
    labelClass: '', 
    extralink: false, 
    submenu: []                   // submenu items if available
}
                                        
                                    

Dropdown Menu Config

To add dropdown menu item, do as the following example:

                                        
{
    path: '', 
    title: 'Dashboards',                                                  // menu title
    icon: 'mdi mdi-gauge',                                                // menu icon
    class: 'has-arrow',                                                   // only if driodown menu
    label: '4',                                                           // label name
    labelClass: 'label label-rouded label-themecolor pull-right',         // if label available
    extralink: false,
    submenu: [                                                        // submenus like single menu config
        { 
            path: '/dashboard/dashboard1', 
            title: 'Modern', 
            icon: '', 
            class: '', 
            label: '', 
            labelClass: '', 
            extralink: false, 
            submenu: [] 
        },
        { 
            path: '/dashboard/dashboard2', 
            title: 'Classic', 
            icon: '', 
            class: '', 
            label: '', 
            labelClass: '', 
            extralink: false, 
            submenu: [] 
        },
        { 
            path: '/dashboard/dashboard3', 
            title: 'Analytical', 
            icon: '', 
            class: '', 
            label: '', 
            labelClass: '', 
            extralink: false, 
            submenu: [] 
        },
    ]
}
                                        
                                    

Multiple Dropdown Menu Config

To add multi-dropdown menu item, do as the following example:

                                        
{
    path: '', 
    title: 'Menu Levels',                                   // menu name
    icon: 'mdi mdi-arrange-send-backward',                  // menu item
    class: 'has-arrow',                                     // only if dropdown-menu
    label: '', 
    labelClass: '', 
    extralink: false,
    submenu: [                                              // first-level dropdown
        { 
            path: 'javascript:void(0);', 
            title: 'Second Level', 
            icon: '', 
            class: '', 
            label: '', 
            labelClass: '', 
            extralink: true, 
            submenu: [] 
        },
        {
            path: '', 
            title: 'Second Child', 
            icon: '', 
            class: 'has-arrow', 
            label: '', 
            labelClass: '', 
            extralink: false,
            submenu: [                                      // second-level dropdown
                { 
                    path: 'javascript:void(0);', 
                    title: 'Third 1.1', 
                    icon: '', 
                    class: '', 
                    label: '', 
                    labelClass: '', 
                    extralink: false, 
                    submenu: [] 
                },
                { 
                    path: 'javascript:void(0);', 
                    title: 'Third 1.2', 
                    icon: '', 
                    class: '', 
                    label: '', 
                    labelClass: '', 
                    extralink: false, 
                    submenu: [] 
                },
            ]
        }
    ]
} 
                                        
                                    

Routes Config

You also have to configure specific component's routing file. like for dashboard component, you have to configure dashboards.routing.ts file as following:

                                        
export const DashboardsRoutes: Routes = [
    { 
        path: '',
        children: [{
          path: 'dashboard1', 
          component: Dashboard1Component
        },{
          path: 'dashboard2', 
          component: Dashboard2Component
        },{
          path: 'dashboard3', 
          component: Dashboard3Component
        }]
    }
];
                                        
                                    

Refer following link for usage:

Various Demos


There are various demo configurations available with this template. We have added some options in this theme. You can change that options and create whatever kind of demo you need for your project. Below is the options for the main demo, which is included in the package. We are giving 2 ready to use demos with the package, but you can create many more by yourself. Further below that, there are 3 more demo configurations given, so you can have the idea of how to change the options and create more demos.

                                        
options = {
    theme: 'light',        // two possible values: light, dark
    dir: 'ltr',            // two possible values: ltr, rtl
    layout: 'vertical',    // fixed value. shouldn't be changed.
    sidebartype: 'full',   // four possible values: full, iconbar, overlay, mini-sidebar
    sidebarpos: 'fixed',   // two possible values: fixed, absolute
    headerpos: 'fixed',    // two possible values: fixed, absolute
    boxed: 'full',         // two possible values: full, boxed
    navbarbg: 'skin1',     // six possible values: skin(1/2/3/4/5/6)
    sidebarbg: 'skin6',    // six possible values: skin(1/2/3/4/5/6)
    logobg: 'skin6',       // six possible values: skin(1/2/3/4/5/6)
};
                                        
                                    

Dark Demo

To create Dark demo from this template, do the change as follows:

  • Open the file full.component.ts.
  • Path for that file is: src/app/layouts/full/full.component.ts
  • In that file, you have to change options.
                                                    
    options = {
        theme: 'dark',         // two possible values: light, dark
        dir: 'ltr',            // two possible values: ltr, rtl
        layout: 'vertical',    // fixed value. shouldn't be changed.
        sidebartype: 'full',   // four possible values: full, iconbar, overlay, mini-sidebar
        sidebarpos: 'fixed',   // two possible values: fixed, absolute
        headerpos: 'fixed',    // two possible values: fixed, absolute
        boxed: 'full',         // two possible values: full, boxed
        navbarbg: 'skin1',     // six possible values: skin(1/2/3/4/5/6)
        sidebarbg: 'skin5',    // six possible values: skin(1/2/3/4/5/6)
        logobg: 'skin1',       // six possible values: skin(1/2/3/4/5/6)
    };
                                                    
                                                

RTL Demo

To create Minisidebar demo from this template, do the change as follows:

  • Open the file full.component.ts.
  • Path for that file is: src/app/layouts/full/full.component.ts
  • In that file, you have to change options.
                                                    
    options = {
        theme: 'light',        // two possible values: light, dark
        dir: 'rtl',            // two possible values: ltr, rtl
        layout: 'vertical',    // fixed value. shouldn't be changed.
        sidebartype: 'full',   // four possible values: full, iconbar, overlay, mini-sidebar
        sidebarpos: 'fixed',   // two possible values: fixed, absolute
        headerpos: 'fixed',    // two possible values: fixed, absolute
        boxed: 'full',         // two possible values: full, boxed
        navbarbg: 'skin1',     // six possible values: skin(1/2/3/4/5/6)
        sidebarbg: 'skin6',    // six possible values: skin(1/2/3/4/5/6)
        logobg: 'skin6',       // six possible values: skin(1/2/3/4/5/6)
    };
                                                    
                                                

Boxed Demo

To create Boxed Layout demo from this template, do the change as follows:

  • Open the file full.component.ts.
  • Path for that file is: src/app/layouts/full/full.component.ts
  • In that file, you have to change options.
                                                    
    options = {
        theme: 'light',        // two possible values: light, dark
        dir: 'ltr',            // two possible values: ltr, rtl
        layout: 'vertical',    // fixed value. shouldn't be changed.
        sidebartype: 'full',   // four possible values: full, iconbar, overlay, mini-sidebar
        sidebarpos: 'fixed',   // two possible values: fixed, absolute
        headerpos: 'fixed',    // two possible values: fixed, absolute
        boxed: 'boxed',        // two possible values: full, boxed
        navbarbg: 'skin6',     // six possible values: skin(1/2/3/4/5/6)
        sidebarbg: 'skin6',    // six possible values: skin(1/2/3/4/5/6)
        logobg: 'skin1',       // six possible values: skin(1/2/3/4/5/6)
    };
                                                    
                                                

Horizontal Demo


Horizontal demo is bit different from all the other demos. All the pages and widgets are same as other demos. What is different is its configuration and navigation. Below are the options for our default Horizontal Demo. Again from this options also, you can create many demos with horizontal navigation, but keep in mind that you should copy paste this demo and then change options in that because scss is written differently for horizontal layout.

                                        
options = {
    theme: 'light',            // two possible values: light, dark
    dir: 'ltr',                // two possible values: ltr, rtl
    layout: 'horizontal',      // fixed value. shouldn't be changed.
    sidebartype: 'full',       // fixed value. shouldn't be changed.
    sidebarpos: 'absolute',    // two possible values: fixed, absolute
    headerpos: 'absolute',     // two possible values: fixed, absolute
    boxed: 'boxed',            // two possible values: full, boxed
    navbarbg: 'skin1',         // six possible values: skin(1/2/3/4/5/6)
    sidebarbg: 'skin6',        // six possible values: skin(1/2/3/4/5/6)
    logobg: 'skin1',           // six possible values: skin(1/2/3/4/5/6)
};
                                        
                                    

Color Variations


There are six colors available with this template. Basically, we have added 6 variables in our variable.scss file, which are as below. These colors can be applied as navbar background, logo background and sidebar background. You can change values of these variables to the colors of your choice.

                                        
$skin1: #2962FF;
$skin2: #fe5419;
$skin3: #00b0ff;
$skin4: #6659f7;
$skin5: #414755;
$skin6: #fff;
                                        
                                    

How to change default applied colors of the template?

To change default applied colors of this template, do the change as follows:

  • Open the file full.component.ts.
  • Path for that file is: src/app/layouts/full/full.component.ts
  • In that file, you have to change options. find below parameters in the options and change possible values:
  •                                             
    options = {
        navbarbg: 'skin1',         // six possible values: skin(1/2/3/4/5/6)
        sidebarbg: 'skin1',        // six possible values: skin(1/2/3/4/5/6)
        logobg: 'skin1',           // six possible values: skin(1/2/3/4/5/6)
    };
                                                
                                            

Customizer


We have added customizer as the right sidebar in this template.


For vertical layout:

From here, you can change the configuration options of the demo temporarily to try and test out other demos. Customizer is devided into 3 parts:

1. Layout Settings

In layout settings, there are 5 options.

  1. Dark Theme
  2. Fixed Sidebar
  3. Fixed Header
  4. Boxed Layout
  5. RTL
2. Sidebar Types

In sidebar types, there are 4 options.

  1. Mini Sidebar
  2. Icon Sidebar
  3. Overlay Sidebar
  4. Full Sidebar
3. Color Options

In color options, there are 3 options.

  1. Logo Background
  2. Navbar Background
  3. Sidebar Background

For horizontal layout:

horizontal layout has all the options listed in the verticla layout except sidebar types. Sidebar type is fixed to 'full' for horizontal layout.

Components


This template uses ng-bootstrap components which contains a set of native Angular directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • Angular ( requires Angular version 5 or higher, tested with 5.0.2)
  • Bootstrap CSS (tested with 4.0.0)

Installation

After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap

Once installed you need to import main module.

                                        
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
                                        
                                    

The only remaining part is to list the imported module in your root module and any additional application modules that make use of the components in this library. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):

                                        
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}
                                        
                                    

Other modules in your application can simply import NgbModule:

                                        
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}
                                        
                                    

Accordion


Refer following links for usage and more options:

Alert


Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Refer following links for usage and more options:

Progressbar


Refer following links for usage and more options:

Ratings


Rating directive that will take care of visualising a star rating bar.

Refer following links for usage and more options:

Tabs


Refer following links for usage and more options:

Timepicker


Refer following links for usage and more options:

Toastr Notifications


This Angular toastr module will show bootstrap-like toasts.

Refer following links for usage and more options:

Editor


An Angular Editor.

Refer following links for usage and more options:

File Upload


Refer following links for usage and more options:

Drag & Drop


Refer following links for usage and more options:

Forms


Basic Form

Basic form labels have inline block styling where form controls are below its label. This is the default bootstrap and most basic style for displaying forms. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..

Refer following links for usage:

Type URL
Template Page https://wrappixel.com/demos/angular-admin-templates/nice-angular/main/#/forms/formbasic

Horizontal Form

Horizontal Forms labels have inline styling where form controls are in the same line as its label. Add .form-horizontal class to the form tag to have horizontal form styling. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..


Form Validation

This form provides full form validations.

Refer following links for usage:

Type URL
Template Page https://wrappixel.com/demos/angular-admin-templates/nice-angular/main/#/forms/formvalidation

Form Typehead

A typeahead example that gets values from a static string[]

Directives :

Directive Selector Description
NgbTypeahead input[ngbTypeahead] NgbTypeahead directive provides a simple way of creating powerful typeaheads from any text input

Refer following links for usage:

Type URL
NG-Bootstrap Page https://ng-bootstrap.github.io/#/components/typeahead
Template Page https://wrappixel.com/demos/angular-admin-templates/nice-angular/main/#/component/typehead

Form Datepicker

Directives :

Directive Selector Description
NgbDatepicker ngb-datepicker A lightweight and highly configurable datepicker directive
NgbInputDatepicker input[ngbDatepicker] A directive that makes it possible to have datepickers on input fields. Manages integration with the input field itself (data entry) and ngModel (validation etc.).

Refer following links for usage:

Type URL
NG-Bootstrap Page https://ng-bootstrap.github.io/#/components/datepicker
Template Page https://wrappixel.com/demos/angular-admin-templates/nice-angular/main/#/component/datepicker

Tables


Basic Table

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

                                        
<table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>
                                        
                                    
Bootstrap Tables Options Class Description
Inverse table .table-inverse You can also invert the colors—with light text on dark backgrounds using this class.
Table head options .thead-[default/inverse] Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.
Table head options with primary background .bg-* Use this class to make custom heading background to thead.
Striped rows .table-striped Use this class to add zebra-striping to any table row within the <tbody>.
Bordered table .table-bordered Use this class for borders on all sides of the table and cells.
Bordered striped .table-striped.table-bordered Use this class to add zebra-striping to any table row within the <tbody>.
Hoverable rows .table-hover Use this class to enable a hover state on table rows within a <tbody>.
Contextual classes .table-[active/*] Use contextual classes to color table rows or individual cells.
Responsive tables .table-responsive Use this class to create responsive tables by wrapping any .table to make them scroll horizontally on small devices.

Tables sizing examples like default & small.

Tables Sizing Options Class Description
Default table .table Use this class to the .table to create a table with default spacing. Default table all rows have 0.75rem height.
Small table .table-sm Use this class to the .table to create a table with small spacing. Small table all rows have 0.6rem height.

Smart Table

Refer following links for usage:


Data Tables

Refer following links for usage and more options:

Charts


Chart JS

Beautiful charts for Angular based on Chart.js

Refer following links for usage and more options:


Chartist JS

Chartist component for Angular.

Refer following links for usage and more options:


NGX Charts

Chart component for Angular.

Refer following links for usage and more options:

Calendar


A calendar component for Angular 4.0+ that can display events on a month, week or day view.

Refer following links for usage and more options:

Free support


If you have any type of query or issue, feel free to contact us.

Thank you
© 2019 Nice Angular Admin by wrappixel.com