Introduction


MaterialPro Angular Dashboard Template is made with Material Angular. 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 JS, CSS and HTML to be able to modify this template.

If you dont find something while you are following the documentation, please create a support ticket from wrappixel.com and our tech. team will help you out.

Support does include:

  • Answering your questions or problems regarding the template.
  • Giving solution to the Bugs reported.
  • Updating our existing template to latest version of softwares / frameworks.

Support does not include:

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

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

We at WrapPixel offers affordable customisation services for our templates. For any customisation 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

Material Admin 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
        ├── favicon.ico
        ├── index.html
        ├── main.ts
        ├── polyfills.ts
        ├── styles.css
        ├── test.ts
        ├── tsconfig.app.json
        └── tsconfig.spec.json
                                        
                                    

The root folder
                                        
        main/
        ├── e2e/
        |   ├── app.e2e-spec.ts
        |   ├── app.po.ts
        |   └── tsconfig.e2e.json
        ├── node_modules/...
        ├── src/...
        ├── .angular-cli.json
        ├── .editorconfig
        ├── .gitignore
        ├── karma.conf.js
        ├── package.json
        ├── protractor.conf.js
        ├── 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, menu sidebar, right sidebar 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


styles folder
                                        
        main/
        ├── src/
        |   ├── styles/
        |   |   ├── colors/
        |   |   ├── icons/
        |   |   ├── app.scss
        |   |   ├── header.scss
        |   |   ├── pages.scss
        |   |   ├── responsive.scss
        |   |   ├── rtl.scss
        |   |   ├── sidebar.scss
        |   |   ├── spinner.scss
        |   |   ├── style.scss
        |   |   ├── variables.scss
        |   |   ├── widgets.scss   
                                        
                                    
# Folder/Files Details
1 colors colors/ folder contains various color scss files.
2 icons icons/ folder contains all the icons scss files used in the template.
3 app.scss contains all the common css used on the theme.
4 header.scss contains header css of the theme.
5 rtl.scss contains RTL css of the theme.
6 spinner.scss contains loader css of the theme.
7 pages.scss contains various page templates css of the theme.
8 Responsive.scss contains responsive layout css of the theme.
9 sidebar.scss contains sidebar menu css of the theme.
10 style.scss imports all the other scss files and compiles them into single style.css
11 variables.scss contains all the variables used in the scss files of the theme.
12 widgets.scss contains all the css of the widgets designed in the theme.

Icons


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

Icon Name Example
Font-awesome <i class="fa fa-icon-name"></i>
Material Icons <mat-icon>icon-name</mat-icon>
Themify Icons <i class="ti-icon-name"></i>

Refer following link for usage of Material Icon:

Menu Structure


A modern responsive menu.


Main menu-item metadata

                                        
export interface Menu {
    state: string;
    name: string;
    type: string;
    icon: string;
    badge?: BadgeItem[];
    saperator?: Saperator[];    
    children?: ChildrenItems[];
}
                                        
                                    

Children menu-item metadata (sub-menu)

                                        
export interface ChildrenItems {
    state: string;
    name: string;
    type?: string;
}
                                        
                                    

Single menu config

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

                                        
{
    state: 'menu-name',                           // i.e dashboard
    name: 'menu-name to show on sidebar',         // i.e Dashboard
    type: 'menu-type',                            // i.e link        // sub, link, seprator
    icon: 'icon name for menu'                    // i.e av_timer
}
                                        
                                    

Dropdown menu config

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

                                        
{
    state: 'menu-name',                                  // i.e dashboard
    name: 'menu-name to show on sidebar',                // i.e Dashboard
    type: 'menu-type',                                   // i.e sub        // sub, link, seprator
    icon: 'icon name for menu'                           // i.e av_timer
    children: [
        { 
            state: 'submenu-name',                       // i.e dashboard1
            name: 'submenu-name to show on sidebar'      // i.e Dashboard 1
        },
        { 
            state: 'submenu-name',                       // i.e dashboard2
            name: 'submenu-name to show on sidebar'      // i.e Dashboard 2
        }           
    ]
}
                                        
                                    

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
        }]
    }
];
                                        
                                    

Refer following link for usage:

Various Demos


There are various demo configurations available with this template.


RTL Demo

To create RTL 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 a variable dir = 'ltr'; to dir = 'rtl'; and done.

Minisidebar Demo

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

  • Open the file full.component.html.
  • Path for that file is: src/app/layouts/full/full.component.html
  • In that file, in the main div tag, you have to change an attribute [ngClass]. In that change 'minisidebar': minisidebar to 'minisidebar': !minisidebar and done.

Boxed Layout Demo

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

  • Open the file full.component.html.
  • Path for that file is: src/app/layouts/full/full.component.html
  • In that file, in the main div tag, you have to change an attribute [ngClass]. In that change 'boxed': boxed to 'boxed': !boxed and done.

Color Variations


There are various colors available with this template.


Red

To change to RED color of this template, do the change as follows:

  • Open the file full.component.html.
  • Path for that file is: src/app/layouts/full/full.component.html
  • In that file, in the main div tag, you have to change an attribute [ngClass]. In that change 'danger': danger to 'danger': !danger and done.

Teal Green

To change to GREEN color of this template, do the change as follows:

  • Open the file full.component.html.
  • Path for that file is: src/app/layouts/full/full.component.html
  • In that file, in the main div tag, you have to change an attribute [ngClass]. In that change 'green': green to 'green': !green and done.

Blue

To change to BLUE color of this template, do the change as follows:

  • Open the file full.component.html.
  • Path for that file is: src/app/layouts/full/full.component.html
  • In that file, in the main div tag, you have to change an attribute [ngClass]. In that change 'blue': blue to 'blue': !blue and done.

Dark

To change to DARK color of this template, do the change as follows:

  • Open the file full.component.html.
  • Path for that file is: src/app/layouts/full/full.component.html
  • In that file, in the main div tag, you have to change an attribute [ngClass]. In that change 'dark': dark to 'dark': !dark and done.

Dark Sidebar

To change to DARK SIDEBAR of this template, do the change as follows:

  • if you want dark sidebar then add .dark-sidebar class to <mat-sidenav> tag with id snav.

Components

Refer following links for installation:

Buttons


Refer following links for usage and more options:

Card


Refer following links for usage and more options:

Grid List


Refer following links for usage and more options:

List


Refer following links for usage and more options:

Tabs


Refer following links for usage and more options:

Stepper


Refer following links for usage and more options:

Expansion Panel


Refer following links for usage and more options:

Chips


Refer following links for usage and more options:

Toolbar


Refer following links for usage and more options:

Progressbar


Refer following links for usage and more options:

Dialog


Refer following links for usage and more options:

Tooltip


Refer following links for usage and more options:

Snackbar


Refer following links for usage and more options:

Slider


Refer following links for usage and more options:

Slider Toggle


Refer following links for usage and more options:

File Upload


Refer following links for usage and more options:

Drag & Drop


This component is used in the taskboard component.

Refer following links for usage and more options:

Tables


Basic Table

Refer following links for usage and more options:


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:

Helper Classes


Refer following link for helper classes:

Free support


If you have any type of query or issue, feel free to contact us by creating a ticket at https://wrappixel.com/support/.

Thank you
© 2019 Material Admin by wrappixel.com