gene demo image

Gene Documentation

Created by THE IRON NETWORK

 

Gene is a powerful admin template developed with a thought to make the web application development easy to all type of developers and users. It provides you the freedom of development with inbuilt features and support for most of the popular libraries. It already consist of most of the required features so you hardly need to extend it, but in case you need to enhance it with any other feature can do it in few easy steps.

Gene is fully responsive and supports all mobile devices available and it is tested on browserstack on all available devices. Gene is developed with well commented code which makes it easy to understand and customize, it also provides a complete detailed documentations on every section gene consist. After all this if you are not getting what are you looking for we are available 24x7 for customer support, drop us and email and we will assist you within 12 hours.

Contact us at: support@theironnetwork.org

Gene Folder Overview

Once you have purchased the Gene from envato and downloaded the package on your system you will find following folder in package.

  1. dist
  2. ng2
  3. ng4+
  4. documentation

3rd Party Components

There are following 3rd party components.

Develop With Gene

Let us help you to start developing your app using Gene. Gene is built with angular-cli which requires node.js and NPM installed on your system.

Installing the prerequisites

Node.js and NPM : Download Node.js from https://nodejs.org/en/download and install on your system. NPM comes bundled with Node.js

angular-cli : Install angular-cli by executing npm install -g @angular/cli command on your your terminal or command prompt. For more details visit https://github.com/angular/angular-cli

Install npm packages : In terminal go to your project root directory and run npm install command, it will download all the dependencies under node_modules folder.

Using CLI
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. Use `--aot` flag for a AoT build

for example: ng build --prod --aot

Further help

To get more help on the `angular-cli` use `ng --help` or go check out https://github.com/angular/angular-cli.

Build Your App

Gene is build with a simple file and componenets structure and its easy to start building new app with it.

Build with existing app

Follow the steps to build new app from existing app

  1. Open "package.json" file and change application name from Gene to your application name
  2. Open ".angular-cli.json" file and change applications name
  3. Open "app-routing.module.ts" file under app directory and setup your app menu
  4. List app required modules and compoments under "app.module.ts" file
  5. Remove components folders from app folder that are not required on your App
  6. Make the changes in scss files under "src\assets\scss" folder to change your app styling
  7. Run commands to run server or build your app

Build new app using components

Follow the steps to build new app using components from Gene app

  1. Create a new directory for your app/project on your system
  2. Copy following files from "Gene" app and paste them in your new project
    1. package.json
    2. .angular-cli.json
    3. karma.conf.js
    4. protractor.conf.js
    5. tsconfig.json
    6. tslint.json

  3. Open "package.json" file and change application name from Gene to your application name
  4. Open ".angular-cli.json" file and change applications name
  5. Create "src" directory under your app
  6. Copy "assets" and "environments" folder from Gene app into your app directory
  7. Copy index.html from Gene app into your app
  8. Copy "app.component.ts", "app.module.ts", "app-routing.module.ts" from Gene app into your app and change them according as per your requirement.
  9. Copy the component folder from "Gene/src" that are required on your app or create your new component
  10. Add a route for this component in "app-routing.module.ts" and import it in "app.module.ts" file
  11. Make the changes in scss files under "src\assets\scss" folder to change your app styling
  12. Run commands to run server or build your app

Style Customization

Following are the ways to give custom colors as per your requirment:

1 .By Changing Variable Value

Go to -> assest folder -> scss folder -> open app.variable.scss file. You will see the following variables:

    //Sidebar

$sidebar-width: 16rem !default; // To Manage the width of the sidebar
$sidebar-text-color: #e4e7ef;  // To Manage the text color of the sidebar
$sidebar-bg-color: #37474F;    // To Manage the background of the sidebar
$compact-sidebar-width: 70px !default; // Set the Width when sidebars's Collapsed option is enabled


//  Header 
$header-bg-color: #f0f2f7; // Manage Header Bg Color
$header-font-color:#000000; // To change the Header Font color
//Md card


$md-card-padding-top-bottom :0.875rem; // Md card padding from top and bottom
$md-card-padding-left-right : 1.5rem; // Md card padding from left and right
$mat-card-bg-color:#ffffff;           // Md Card Bg color
$mar-card-title-font-color:#3A405B; // Md Title font color

//mat-icon
$mat-card-icon-color: #868e96;    // Md icons color

//Main Container 
$container-bg:#f0f2f7; //Main Content Bg
//Rounded Icons
$highlight-icons: #ffffff;  //Rounded icons on Dashborad 1
$highlight-icon-color:#3A405B;


// Typography
//


$font-color: #3A405B;  //To Change Main Text Color or P tag color 
//Meta post
$meta-post-font-weight:bold; // Set the Weight for meta post text ,like on card author post infomation.
//Breadcrumb
$breadcrumb-font-size:0.875rem; // Set the Font size of Breadcrumb
$breadcrumb-font-color:#3A405B; // Set the Font color of Breadcrumb

//Mat list hover bg
$mat-list-hover-bg-color:rgba(0, 0, 0, 0.2);
$html-font-size: 16px; // Global Text font size
$mat-font-family: 'Roboto', sans-serif; //Chnage Font family with your 

Note:To change font family You have to linked the Google Font family into your Index.html File into Head tag.Index file is present in Src folder. 
$font-size-base: 1rem !default; //Set font weight of the text
$font-weight-base: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 600 !default;

//Heading Font Size 

$font-size-h1: 2rem !default;// Set the H1 Heading Font size
$font-size-h2: 1.625rem !default;//26px // Set the H2 Heading Font size
$font-size-h3: 1.375rem !default;//22px// Set the H3 Heading Font size
$font-size-h4: 1.125rem !default;//18px// Set the H4 Heading Font size
$font-size-h5: 0.875rem !default;//14px// Set the H5 Heading Font size
$font-size-h6: 0.75rem !default;//12px// Set the H6 Heading Font size
//Heading Font color

$h1-font-color:inherit; // Set the H1 Heading Font color
$h2-font-color:inherit;// Set the H2 Heading Font color
$h3-font-color:inherit;// Set the H3 Heading Font color
$h4-font-color:inherit;// Set the H4 Heading Font color
$h5-font-color:inherit;// Set the H5 Heading Font color
$h6-font-color:inherit;// Set the H6 Heading Font color

$headings-margin-bottom: (1rem / 2) !default; // Manage Heading font margin
$headings-font-family:   inherit !default; 
$headings-font-weight:   400 !default;
$headings-line-height:   1.1 !default;
$headings-color:         inherit !default;

//
// Radius
//
//Mat -card
$border-radius-base:8px; // Set the Border radius value for md card

Apart from above variables, there are some variables that are avaiable in other scss files for e.g.

In scss folder there is a core folder in this folder you will find the variables required to customise your sidebar. To give it a better structure we have palced the often used variables at the begining of the file. Same structre is followed for rest of the files as well.

For ex: If you want to change the Pre Loader Color then Go to >assets/scss/core and open preloader.scss file and change this $preloader-color:#e53935; value as desired.

2 .By Changing Primary Vars as per Google Color Pallete

If you wish to change the primary colors then you can do the following:

Open assets>scss>material.vaiable file

Go to Google Color palette

By default gene gives the following color set, you can change as per your requirment

 $primary: mat-palette($mat-blue,800);    // #1565c0 color from Google Palette
 $accent:  mat-palette($mat-cyan);        // #00bcd4 color from Google Palette
 $warn: mat-palette($mat-red,600);        // #e53935 color from Google Palette

Simply choose the color you want from the pallete and replace that in the file for e.g. if you wish to change the primary color with Purple - 400 simply choose its hex value (#ab47bc) and replace in the file. 

$primary: mat-palette($mat-purple,400);

3 .By changing the backround color as per Google Color Pallete

To change the background color simply change the bg color classes in the html code which is as per the Google Color Palette.

For ex: on Dashborad 1 (home page) there are four grids like name ,today views ,revenue etc. we have used classes for bg color for e.g. .mat-blue-800 for today views ,mat-red-600 for revenue ,.mat-cyan for Item Sales, .mat-green for New orders. These four classes are used in the theme for bg color. Now if you want to give your own style then you will have to replace these classes with your own new classes (from google pallete).


If you find changing all classes time consuming you can simply remove the comments from the last block classes in assests>scss>core>scaffoling.scss refer to following image to see the block

give your own bg color and text color and this will be reflected in the theme.

4 .By changing color value of charts and map

If you want to change the color value for Charts then you have to go to that specfic chart type and make changes inside its .ts file

for Example:If you want to Change the color value for Dashborad Line Chart then go to >src>app>dashborad>dashborad v1 and open its .ts file and search for line chart and change this:

Material Color Palette

Select color scheme for your theme

 // Color palettes from the Material Design spec.
// See https://www.google.com/design/spec/style/color.html
//
// Contrast colors are hard-coded because it is too difficult (probably impossible) to
// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
// While the contrast colors in the spec are not prescriptive, we use them for convenience.


$black-87-opacity: rgba(black, 0.87);
$white-87-opacity: rgba(white, 0.87);

$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

$mat-pink: (
  50: #fce4ec,
  100: #f8bbd0,
  200: #f48fb1,
  300: #f06292,
  400: #ec407a,
  500: #e91e63,
  600: #d81b60,
  700: #c2185b,
  800: #ad1457,
  900: #880e4f,
  A100: #ff80ab,
  A200: #ff4081,
  A400: #f50057,
  A700: #c51162,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

$mat-purple: (
  50: #f3e5f5,
  100: #e1bee7,
  200: #ce93d8,
  300: #ba68c8,
  400: #ab47bc,
  500: #9c27b0,
  600: #8e24aa,
  700: #7b1fa2,
  800: #6a1b9a,
  900: #4a148c,
  A100: #ea80fc,
  A200: #e040fb,
  A400: #d500f9,
  A700: #aa00ff,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: white,
    400: white,
    500: $white-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

$mat-deep-purple: (
  50: #ede7f6,
  100: #d1c4e9,
  200: #b39ddb,
  300: #9575cd,
  400: #7e57c2,
  500: #673ab7,
  600: #5e35b1,
  700: #512da8,
  800: #4527a0,
  900: #311b92,
  A100: #b388ff,
  A200: #7c4dff,
  A400: #651fff,
  A700: #6200ea,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: white,
    400: white,
    500: $white-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: $white-87-opacity,
    A700: $white-87-opacity,
  )
);

$mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: #3f51b5,
  600: #3949ab,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: #8c9eff,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: white,
    400: white,
    500: $white-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: $white-87-opacity,
  )
);

$mat-blue: (
  50: #e3f2fd,
  100: #bbdefb,
  200: #90caf9,
  300: #64b5f6,
  400: #42a5f5,
  500: #2196f3,
  600: #1e88e5,
  700: #1976d2,
  800: #1565c0,
  900: #0d47a1,
  A100: #82b1ff,
  A200: #448aff,
  A400: #2979ff,
  A700: #2962ff,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

$mat-light-blue: (
  50: #e1f5fe,
  100: #b3e5fc,
  200: #81d4fa,
  300: #4fc3f7,
  400: #29b6f6,
  500: #03a9f4,
  600: #039be5,
  700: #0288d1,
  800: #0277bd,
  900: #01579b,
  A100: #80d8ff,
  A200: #40c4ff,
  A400: #00b0ff,
  A700: #0091ea,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: white,
  )
);

$mat-cyan: (
  50: #e0f7fa,
  100: #b2ebf2,
  200: #80deea,
  300: #4dd0e1,
  400: #26c6da,
  500: #00bcd4,
  600: #00acc1,
  700: #0097a7,
  800: #00838f,
  900: #006064,
  A100: #84ffff,
  A200: #18ffff,
  A400: #00e5ff,
  A700: #00b8d4,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);

$mat-teal: (
  50: #e0f2f1,
  100: #b2dfdb,
  200: #80cbc4,
  300: #4db6ac,
  400: #26a69a,
  500: #009688,
  600: #00897b,
  700: #00796b,
  800: #00695c,
  900: #004d40,
  A100: #a7ffeb,
  A200: #64ffda,
  A400: #1de9b6,
  A700: #00bfa5,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);

$mat-green: (
  50: #e8f5e9,
  100: #c8e6c9,
  200: #a5d6a7,
  300: #81c784,
  400: #66bb6a,
  500: #4caf50,
  600: #43a047,
  700: #388e3c,
  800: #2e7d32,
  900: #1b5e20,
  A100: #b9f6ca,
  A200: #69f0ae,
  A400: #00e676,
  A700: #00c853,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);

$mat-light-green: (
  50: #f1f8e9,
  100: #dcedc8,
  200: #c5e1a5,
  300: #aed581,
  400: #9ccc65,
  500: #8bc34a,
  600: #7cb342,
  700: #689f38,
  800: #558b2f,
  900: #33691e,
  A100: #ccff90,
  A200: #b2ff59,
  A400: #76ff03,
  A700: #64dd17,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $black-87-opacity,
    700: $black-87-opacity,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);

$mat-lime: (
  50: #f9fbe7,
  100: #f0f4c3,
  200: #e6ee9c,
  300: #dce775,
  400: #d4e157,
  500: #cddc39,
  600: #c0ca33,
  700: #afb42b,
  800: #9e9d24,
  900: #827717,
  A100: #f4ff81,
  A200: #eeff41,
  A400: #c6ff00,
  A700: #aeea00,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $black-87-opacity,
    700: $black-87-opacity,
    800: $black-87-opacity,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);

$mat-yellow: (
  50: #fffde7,
  100: #fff9c4,
  200: #fff59d,
  300: #fff176,
  400: #ffee58,
  500: #ffeb3b,
  600: #fdd835,
  700: #fbc02d,
  800: #f9a825,
  900: #f57f17,
  A100: #ffff8d,
  A200: #ffff00,
  A400: #ffea00,
  A700: #ffd600,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $black-87-opacity,
    700: $black-87-opacity,
    800: $black-87-opacity,
    900: $black-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);

$mat-amber: (
  50: #fff8e1,
  100: #ffecb3,
  200: #ffe082,
  300: #ffd54f,
  400: #ffca28,
  500: #ffc107,
  600: #ffb300,
  700: #ffa000,
  800: #ff8f00,
  900: #ff6f00,
  A100: #ffe57f,
  A200: #ffd740,
  A400: #ffc400,
  A700: #ffab00,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $black-87-opacity,
    700: $black-87-opacity,
    800: $black-87-opacity,
    900: $black-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);

$mat-orange: (
  50: #fff3e0,
  100: #ffe0b2,
  200: #ffcc80,
  300: #ffb74d,
  400: #ffa726,
  500: #ff9800,
  600: #fb8c00,
  700: #f57c00,
  800: #ef6c00,
  900: #e65100,
  A100: #ffd180,
  A200: #ffab40,
  A400: #ff9100,
  A700: #ff6d00,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $black-87-opacity,
    700: $black-87-opacity,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: black,
  )
);

$mat-deep-orange: (
  50: #fbe9e7,
  100: #ffccbc,
  200: #ffab91,
  300: #ff8a65,
  400: #ff7043,
  500: #ff5722,
  600: #f4511e,
  700: #e64a19,
  800: #d84315,
  900: #bf360c,
  A100: #ff9e80,
  A200: #ff6e40,
  A400: #ff3d00,
  A700: #dd2c00,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: white,
  )
);

$mat-brown: (
  50: #efebe9,
  100: #d7ccc8,
  200: #bcaaa4,
  300: #a1887f,
  400: #8d6e63,
  500: #795548,
  600: #6d4c41,
  700: #5d4037,
  800: #4e342e,
  900: #3e2723,
  A100: #d7ccc8,
  A200: #bcaaa4,
  A400: #8d6e63,
  A700: #5d4037,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: white,
    400: white,
    500: $white-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: $white-87-opacity,
  )
);

$mat-grey: (
  0: #ffffff,
  50: #fafafa,
  100: #f5f5f5,
  200: #eeeeee,
  300: #e0e0e0,
  400: #bdbdbd,
  500: #9e9e9e,
  600: #757575,
  700: #616161,
  800: #424242,
  900: #212121,
  1000: #000000,
  A100: #ffffff,
  A200: #eeeeee,
  A400: #bdbdbd,
  A700: #616161,
  contrast: (
    0: $black-87-opacity,
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    1000: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $white-87-opacity,
  )
);

$mat-blue-grey: (
  50: #eceff1,
  100: #cfd8dc,
  200: #b0bec5,
  300: #90a4ae,
  400: #78909c,
  500: #607d8b,
  600: #546e7a,
  700: #455a64,
  800: #37474f,
  900: #263238,
  A100: #cfd8dc,
  A200: #b0bec5,
  A400: #78909c,
  A700: #455a64,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: white,
    500: white,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: $white-87-opacity,
  )
);


// Background palette for light themes.
$mat-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
);

// Background palette for dark themes.
$mat-dark-theme-background: (
  status-bar: black,
  app-bar:    map_get($mat-grey, 900),
  background: #303030,
  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
  card:       map_get($mat-grey, 800),
  dialog:     map_get($mat-grey, 800),
  disabled-button: rgba(white, 0.12),
  raised-button: map-get($mat-grey, 800),
);

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:            black,
  divider:         rgba(black, 0.12),
  dividers:        rgba(black, 0.12),
  disabled:        rgba(black, 0.38),
  disabled-button: rgba(black, 0.38),
  disabled-text:   rgba(black, 0.38),
  hint-text:       rgba(black, 0.38),
  secondary-text:  rgba(black, 0.54),
  icon:            rgba(black, 0.54),
  icons:           rgba(black, 0.54),
  text:            rgba(black, 0.87)
);

// Foreground palette for dark themes.
$mat-dark-theme-foreground: (
  base:            white,
  divider:         rgba(white, 0.12),
  dividers:        rgba(white, 0.12),
  disabled:        rgba(white, 0.3),
  disabled-button: rgba(white, 0.3),
  disabled-text:   rgba(white, 0.3),
  hint-text:       rgba(white, 0.3),
  secondary-text:  rgba(white, 0.7),
  icon:            white,
  icons:           white,
  text:            white
);

Inbox

Responsive Mail Inbox and Compose is used to create the inbox. Preview image is given below.

Adding inbox page in your project

There following steps to add inbox page

  • First of all, you have to edit in app.module file ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { InboxComponent } from './inbox/inbox.component';
import { MailService } from "./inbox/mail.service";
import { InboxComposeComponent } from './inbox/inbox-compose/inbox-compose.component';

  • Now open app-routing.module.ts file and import this file. 

    import { InboxComponent }  from './inbox/inbox.component';

    After this,add following in routes

    { path: 'inbox', component: InboxComponent }
gene demo image

Chat

Preview image is given below.

Adding Chat page in your project

There following steps to add Chat page

  • First of all, you have to edit in app.module file ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { ChatComponent}  from './chat/chat.component';

  • Now open app-routing.module.ts file and import this file. 

    import { ChatComponent }  from './chat/chat.component';

    After this,add following in routes

     { path: 'chat', component: ChatComponent }
gene demo image

Calender

A flexible calendar component for angular 4.0+ that can display events on a month, week or day view. Preview image is given below.

Adding Calender page in your project

There following steps to add Calendar

  • First of all, you have to edit in app.module file ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { CalendarComponent}  from './calendar/calendar.component';

  • Now open app-routing.module.ts file and import this file. 

    import { CalendarComponent}  from './calendar/calendar.component';

    After this,add following in routes

     { path: 'calendar', component: CalendarComponent }
gene demo image

Editor

Preview image is given below.

Wysiwyg Editor

Adding Editor in your project

There following steps to add Editor

  • First of all, you have to edit in app.module file ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { EditorComponent}  from './editor/wysiwyg-editor/editor.component';

  • Now open app-routing.module.ts file and import this file. 

    import { EditorComponent}  from './editor/wysiwyg-editor/editor.component';

    After this,add following in routes

     { path: 'editor/wysiwyg', component: EditorComponent }
gene demo image
Ck Editor

Adding Editor in your project

There following steps to add Editor

  • First of all, you have to edit in app.module file ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { Ckeditor } from './editor/ckeditor/ckeditor.component';

  • Now open app-routing.module.ts file and import this file. 

    import { Ckeditor } from './editor/ckeditor/ckeditor.component';

    After this,add following in routes

     { path: 'editor/ckeditor', component: Ckeditor }
gene demo image

Material Icons

Preview image is given below.

Adding Icons in your project

There following steps to add Material

  • First of all, you have to edit in app.module file ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { MaterialIconComponent}  from './material-icons/icons.component';

  • Now open app-routing.module.ts file and import this file. 

    import { MaterialIconComponent}  from './material-icons/icons.component';

    After this,add following in routes

    { path: 'icons', component: MaterialIconComponent }
gene demo image

Ng2Charts

Preview image is given below.

Adding Ng2 in your project

There following steps to add Ng2 Charts

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { ChartComponent}  from './chart/ng2-charts/chart.component';

  • Now open app-routing.module.ts file and import this file. 

    import { ChartComponent }  from './chart/ng2-charts/chart.component';

    After this,add following in routes

    { path: 'chart/ng2-charts', component: ChartComponent }
gene demo image
gene demo image
Easy Pie

Adding Easy pie in your project

There following steps to add Easy Pie

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { EasyPieChartComponent}  from './chart/easy-pie-chart/easy-pie-chart.component';

  • Now open app-routing.module.ts file and import this file. 

    import { EasyPieChartComponent }  from './chart/easy-pie-chart/easy-pie-chart.component';

    After this,add following in routes

    { path: 'chart/easy-pie-chart', component: EasyPieChartComponent }
gene demo image

Components

Preview image is given below.

Buttons

Adding Buttons in your project

There following steps to add Buttons

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { ButtonsComponent }   from './components/buttons/buttons.component';

  • Now open app-routing.module.ts file and import this file. 

    import { ButtonsComponent }   from './components/buttons/buttons.component';

    After this,add following in routes

    { path: 'components/buttons', component: ButtonsComponent }
gene demo image
Cards

Adding Cards in your project

There following steps to add Cards

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { CardsComponent }   from './components/cards/cards.component';

  • Now open app-routing.module.ts file and import this file. 

    import { CardsComponent }   from './components/cards/cards.component';

    After this,add following in routes

    { path: 'components/cards', component: CardsComponent }
gene demo image
Grid

Adding Grid in your project

There following steps to add Grid

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { GridListComponent }  from './components/grid-list/gridlist.component';

  • Now open app-routing.module.ts file and import this file. 

    import { GridListComponent }  from './components/grid-list/gridlist.component';

    After this,add following in routes

    { path: 'components/grid', component: GridListComponent }
gene demo image
List

Adding List in your project

There following steps to add List

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { ListOverviewComponent }  from './components/list/list.component';

  • Now open app-routing.module.ts file and import this file. 

    import { ListOverviewComponent }  from './components/list/list.component';

    After this,add following in routes

    	{ path: 'components/list', component: ListOverviewComponent }
gene demo image
gene demo image
Menu

Adding Menu in your project

There following steps to add Menu

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { MenuOverviewComponent }  from './components/menu/menu.component';

  • Now open app-routing.module.ts file and import this file. 

    import import { MenuOverviewComponent }  from './components/menu/menu.component';

    After this,add following in routes

    	{ path: 'components/menu', component: MenuOverviewComponent }
gene demo image
Slider

Adding Slider in your project

There following steps to add Slider

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import import { SliderOverviewComponent }  from './components/slider/slider.component';

  • Now open app-routing.module.ts file and import this file. 

    import { SliderOverviewComponent }  from './components/slider/slider.component';

    After this,add following in routes

    	{ path: 'components/slider', component: SliderOverviewComponent }
gene demo image
Snackbar

Adding Snackbar in your project

There following steps to add Snackbar

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { SnackbarOverviewComponent }  from './components/snackbar/snackbar.component';

  • Now open app-routing.module.ts file and import this file. 

    import { SnackbarOverviewComponent }  from './components/snackbar/snackbar.component';

    After this,add following in routes

    { path: 'components/snackbar', component: SnackbarOverviewComponent }
gene demo image
Tooltip

Adding Tooltip in your project

There following steps to add Tooltip

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { TooltipOverviewComponent }  from './components/tooltip/tooltip.component';

  • Now open app-routing.module.ts file and import this file. 

    import { TooltipOverviewComponent }  from './components/tooltip/tooltip.component';

    After this,add following in routes

    { path: 'components/tooltip', component: TooltipOverviewComponent }
gene demo image
Dialog

Adding Dialog in your project

There following steps to add Dialog

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { DialogOverviewComponent, DemoDialog}  from './components/dialog/dialog.component';

  • Now open app-routing.module.ts file and import this file. 

    import { DialogOverviewComponent}  from './components/dialog/dialog.component';

    After this,add following in routes

    { path: 'components/dialog', component: DialogOverviewComponent }
gene demo image
Select

Adding Select in your project

There following steps to add Select

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { SelectComponent}  from './components/select/select.component';

  • Now open app-routing.module.ts file and import this file. 

    import { SelectComponent}  from './components/select/select.component';

    After this,add following in routes

    { path: 'components/select', component: SelectComponent }
gene demo image
Input

Adding input in your project

There following steps to add input

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { InputComponent}  from './components/input/input.component';

  • Now open app-routing.module.ts file and import this file. 

    import { InputComponent}  from './components/input/input.component';

    After this,add following in routes

    	{ path: 'components/input', component: InputComponent }
gene demo image
Checkbox

Adding Checkbox in your project

There following steps to add Checkbox

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { CheckboxComponent}  from './components/checkbox/checkbox.component';

  • Now open app-routing.module.ts file and import this file. 

    import { CheckboxComponent}  from './components/checkbox/checkbox.component';

    After this,add following in routes

    	{ path: 'components/checkbox', component: CheckboxComponent }
gene demo image
Radio

Adding Radio in your project

There following steps to add Radio

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { RadioComponent}  from './components/radio/radio.component';

  • Now open app-routing.module.ts file and import this file. 

    import { RadioComponent}  from './components/radio/radio.component';

    After this,add following in routes

    { path: 'components/radio', component: RadioComponent }
gene demo image
Toolbar

Adding Toolbar in your project

There following steps to add Toolbar

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { ToolbarComponent}  from './components/toolbar/toolbar.component';

  • Now open app-routing.module.ts file and import this file. 

    import { ToolbarComponent}  from './components/toolbar/toolbar.component';

    After this,add following in routes

    { path: 'components/toolbar', component: ToolbarComponent }
gene demo image
Progress

Adding Progress in your project

There following steps to add Progress

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { ProgressComponent}  from './components/progress/progress.component';

  • Now open app-routing.module.ts file and import this file. 

    import { ProgressComponent}  from './components/progress/progress.component';

    After this,add following in routes

    	{ path: 'components/progress', component: ProgressComponent }
gene demo image
Tabs

Adding Tabs in your project

There following steps to add Tabs

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { TabsComponent}  from './components/tabs/tabs.component';

  • Now open app-routing.module.ts file and import this file. 

    import { TabsComponent}  from './components/tabs/tabs.component';

    After this,add following in routes

    { path: 'components/tabs', component: TabsComponent }
gene demo image

Drag & Drop

Preview image is given below.

Dragula

Adding Drag Drop in your project

There following steps to add Drag Drop

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { DragulaDemoComponent}  from './drag-and-drop/dragula/dragula.component';

  • Now open app-routing.module.ts file and import this file. 

    import { DragulaDemoComponent }  from './drag-and-drop/dragula/dragula.component';

    After this,add following in routes

    { path: 'dragndrop/dragula', component: DragulaDemoComponent }
gene demo image
SortableJs
Dragula

Adding Sortable in your project

There following steps to add Sortable

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { SortableDemoComponent}  from './drag-and-drop/sortablejs/sortable.component';

  • Now open app-routing.module.ts file and import this file. 

    import { SortableDemoComponent }  from './drag-and-drop/sortablejs/sortable.component';

    After this,add following in routes

    { path: 'dragndrop/sortable', component: SortableDemoComponent }
gene demo image

Tables

Preview image is given below.

Full Screen

Adding Full Screen Table in your project

There following steps to add Full Screen Table

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { FullscreenTableComponent}  from './tables/table-fullscreen/table-fullscreen.component';

  • Now open app-routing.module.ts file and import this file. 

    import { FullscreenTableComponent }  from './tables/table-fullscreen/table-fullscreen.component';

    After this,add following in routes

    { path: 'tables/fullscreen', component: FullscreenTableComponent }
gene demo image
Selection

AddinPinning Table in your project

There following steps to adPinning Table

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { SelectionTableComponent}  from './tables/table-selection/table-selection.component';

  • Now open app-routing.module.ts file and import this file. 

    import { SortingTableComponent }  from './tables/table-sorting/table-sorting.component';

    After this,add following in routes

    { path: 'tables/selection', component: SelectionTableComponent }
gene demo image
Pinning

Adding Pinning Table in your project

There following steps to add Pinning Table

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { PinningTableComponent}  from './tables/table-pinning/table-pinning.component';

  • Now open app-routing.module.ts file and import this file. 

    import { PinningTableComponent }  from './tables/table-pinning/table-pinning.component';

    After this,add following in routes

    { path: 'tables/pinning', component: PinningTableComponent }
gene demo image
Sorting

Adding Sorting Table in your project

There following steps to add Sorting Table

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { SortingTableComponent}  from './tables/table-sorting/table-sorting.component';

  • Now open app-routing.module.ts file and import this file. 

    import { SortingTableComponent }  from './tables/table-sorting/table-sorting.component';

    After this,add following in routes

    { path: 'tables/sorting', component: SortingTableComponent }
gene demo image
Paging

Adding Paging Table in your project

There following steps to add Paging Table

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { PagingTableComponent}  from './tables/table-paging/table-paging.component';

  • Now open app-routing.module.ts file and import this file. 

    import { PagingTableComponent }  from './tables/table-paging/table-paging.component';

    After this,add following in routes

    { path: 'tables/paging', component: PagingTableComponent }
gene demo image
Editing

Adding Editing Table in your project

There following steps to add Editing Table

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { EditingTableComponent}  from './tables/table-editing/table-editing.component';

  • Now open app-routing.module.ts file and import this file. 

    import { EditingTableComponent }  from './tables/table-editing/table-editing.component';

    After this,add following in routes

    { path: 'tables/editing', component: EditingTableComponent }
gene demo image
Filter

Adding Filter Table in your project

There following steps to add Filter Table

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { FilterTableComponent}  from './tables/table-filter/table-filter.component';

  • Now open app-routing.module.ts file and import this file. 

    import { FilterTableComponent }  from './tables/table-filter/table-filter.component';

    After this,add following in routes

     { path: 'tables/filter', component: FilterTableComponent }
gene demo image

Forms

Preview image is given below.

Form Wizard

Adding Form Wizard in your project

There following steps to add Form Wizard

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { FormWizardComponent}  from './forms/form-wizard/formwizard.component';

  • Now open app-routing.module.ts file and import this file. 

    import { FormWizardComponent }  from './forms/form-wizard/formwizard.component';

    After this,add following in routes

    { path: 'forms/form-wizard', component: FormWizardComponent }
gene demo image
Form Validation

Adding Form Validation in your project

There following steps to add Form Validation

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { FormValidationComponent}  from './forms/form-validation/formvalidation.component';

  • Now open app-routing.module.ts file and import this file. 

    import { FormValidationComponent }  from './forms/form-validation/formvalidation.component';

    After this,add following in routes

    { path: 'forms/form-validation', component: FormValidationComponent }
gene demo image
Upload

Adding Form Validation in your project

There following steps to add Form Validation

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { FormValidationComponent}  from './forms/form-validation/formvalidation.component';

  • Now open app-routing.module.ts file and import this file. 

    import { FormValidationComponent }  from './forms/form-validation/formvalidation.component';

    After this,add following in routes

    { path: 'forms/form-validation', component: FormValidationComponent }
gene demo image
Tree

Adding Form Tree in your project

There following steps to add Form Tree

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { FormTreeComponent}  from './forms/form-tree/formtree.component';

  • Now open app-routing.module.ts file and import this file. 

    import { FormTreeComponent }  from './forms/form-tree/formtree.component'

    After this,add following in routes

    { path: 'forms/form-tree', component: FormTreeComponent }
gene demo image

Maps

Preview image is given below.

Google Map

Adding Google Maps in your project

There following steps to add Google Maps

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { GoogleMapComponent}  from './maps/google-map/googlemap.component';

  • Now open app-routing.module.ts file and import this file. 

    import { GoogleMapComponent}  from './maps/google-map/googlemap.component';

    After this,add following in routes

    { path: 'maps/googlemap', component: GoogleMapComponent }
gene demo image
Leaflet Map

Adding Leaflet Maps in your project

There following steps to add Leaflet Maps

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { LeafletMapComponent}  from './maps/leaflet-map/leafletmap.component';

  • Now open app-routing.module.ts file and import this file. 

    import { LeafletMapComponent}  from './maps/leaflet-map/leafletmap.component';

    After this,add following in routes

    { path: 'maps/leafletmap', component: LeafletMapComponent }
gene demo image

Pages

Preview image is given below.

User List

Adding User List in your project

There following steps to add User List

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { UserListComponent } from './custom-pages/user-list/userlist.component';

  • Now open app-routing.module.ts file and import this file. 

    import { UserListComponent }  from './custom-pages/user-list/userlist.component';

    After this,add following in routes

    { path: 'pages/userlist', component: UserListComponent }
gene demo image
Pricing List
gene demo image

Sessions

Preview image is given below.

Login

Adding Login Form in your project

There following steps to add Login Form

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { LoginComponent } from './session/login/login.component';

  • Now open app-routing.module.ts file and import this file. 

    import { LoginComponent }  from './session/login/login.component';

    After this,add following in routes

    {path: 'session/login',component: LoginComponent}
gene demo image
Register

Adding Register Form in your project

There following steps to add Register Form

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { RegisterComponent } from './session/register/register.component';

  • Now open app-routing.module.ts file and import this file. 

    import { RegisterComponent }  from './session/register/register.component';

    After this,add following in routes

    {path: 'session/register',	component: RegisterComponent}
gene demo image
Forgot

Adding Forgot Password Form in your project

There following steps to add Forgot Password Form

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { ForgotPasswordComponent } from './session/forgot-password/forgot-password.component';

  • Now open app-routing.module.ts file and import this file. 

    import { ForgotPasswordComponent }  from './session/forgot-password/forgot-password.component';

    After this,add following in routes

    {path: 'session/forgot-password',component: ForgotPasswordComponent}
gene demo image
Lockscreen

Adding Lockscreen Form in your project

There following steps to add Lockscreen Form

  • First of all, you have to edit in app.modulefile ,which is located in your-project-name\src\app folder.

  • Import following files in app.module file

    import { LockScreenComponent } from './session/lockscreen/lockscreen.component';

  • Now open app-routing.module.ts file and import this file. 

    import { LockScreenComponent }  from './session/lockscreen/lockscreen.component';

    After this,add following in routes

    {path: 'session/lockscreen',component: LockScreenComponent}
gene demo image

Add new page

Before adding the page to the dashborad ,make sure that you have html and scss of that page.There is two ways to create component.

  • First,You have to add html ,scss,ts files manually into the component folder and import this component into app.module.ts file

  • Second,You can make component through command prompt.There are following steps.

    • Type command:

      ng generate component component_name

      by executing this command, angular automatically create html,scss and ts files and import to your main module.

    • then,import the new component into app.module.ts file like this

      import { newComponent } from '.Your component path';

      After this,add following in routes

      {path: 'routing path',component: newComponent}
    • Now add state for component into menu.items.ts file which is placed under this folder\src\app\core\menu\menu-items to show your component into sidebar menu.

Remove Page

For removing component:

  • Remove it from app-routing.module.ts
  • Remove form app.module.ts
  • Remove form menu-items.ts
  • and delete the files of the component.