Introduction


Monster 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.

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.

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 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

Admin 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
        ├── 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.

Color Variation


  • 12 color variations are available with this template:
    • blue
    • blue-dark
    • green
    • green-dark
    • red
    • red-dark
    • default
    • default-dark
    • megna
    • megna-dark
    • purple
    • purple-dark
  • You can easily change the color style for your project.
  • Open angular-cli.json file.
  • In that file, find styles array.
  • change the line:
    ../src/assets/scss/colors/CURRENTCOLOR.scss
    to
    ../src/assets/scss/colors/YOURCOLOR.scss

Style Customization


scss folder
                                        
        main/
        ├── src/
        |   ├── assets/
        |   |   ├── scss/
        |   |   |   ├── colors/
        |   |   |   ├── icons/
        |   |   |   ├── app.scss
        |   |   |   ├── grid.scss
        |   |   |   ├── material.scss
        |   |   |   ├── pages.scss
        |   |   |   ├── responsive.scss
        |   |   |   ├── sidebar.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 grid.scss contains content grid related css of the theme.
5 material.scss contains material component css of the theme.
6 pages.scss contains various page templates css of the theme.
7 Responsive.scss contains responsive layout css of the theme.
8 sidebar.scss contains sidebar menu css of the theme.
9 style.scss imports all the other scss files and compiles them into single style.css
10 variables.scss contains all the variables used in the scss files of the theme.
11 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 <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>

Menu Structure


A modern responsive menu.


How to add new menu-item?

  • open pages-routing.module.ts file.
  • file path: src/app/pages/pages-routing.module.ts
  • add the following line of code in the routes array:
    { path: 'newmenu', loadChildren: './newmenu/newmenu.module#NewMenuModule' }
    Replace "newmenu" with your menu item neme.
  • now open sidebar.component.html file.
  • file path: src/app/shared/sidebar/sidebar.component.html
  • add the following code in that file depending on where you want to show your menuitem in the sidebar.
                                                    
    <li [class.active]="showMenu === 'newmenu'">
        <a routerLink="/newmenu" (click)="addExpandClass('newmenu')" [routerLinkActive]="['router-link-active']"><i class="mdi mdi-gauge"></i><span class="hide-menu">NewMenu </span></a>
    </li>
                                                    
                                                

Refer following link for usage:

Content Grid


See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.


Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offsetting columns

Move columns to the right using .offset-md--* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

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 4 or higher, tested with 4.0.3)
  • Bootstrap CSS (tested with 4.0.0-beta.2)

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/monster-angular/main/#/forms/basicform

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/monster-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/monster-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/monster-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:

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 by creating a ticket at https://wrappixel.com/support/.

Thank you
© 2019 Monster Admin by wrappixel.com