Support, all rights reserved © 2018
Gradient Able Angular 5+ docs.

Gradient Able Angular 5+ Admin

Template Documentation

Thank you for downloading Gradient Able Angular 5+ Bootstrap 4 Admin Template. If you have any queries that are beyond the scope of this help file, please feel free to create a support here . Thank you so much!

Created At: 22nd January, 2017

Last Updated At: 23rd March, 2018

all rights reserved 2018©codedthemes

Gradient Able is super clean, modern, responsive, powerful and flexible admin template based on Angular 5+ and bootstrap 4. The Angular CLI 1.7.3 makes it easy to maintain this application. Gradient Able angular 5 template comes with AOT and Lazy Loading.

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first. With Lazy Loading, it allows you to load JavaScript components asynchronously when a specific route is activated.

Dependencies and Support

- used latest node.js and angular-cli

Bowser Support

  • IE10+
  • FireFox
  • Chrome
  • Opera
  • Safari

Getting started

Gradient Able is fully responsive bootstrap 4 admin template for your complete need.

Installing Global Packages

  • Node.js and NPM :You can download Node.js from NODE JS. NPM comes bundled with Node.js.
  • angular-cli :You can install angular-cli by executing from your terminal npm install -g @angular/cli . More details can be found here Angular CLI.

Installing The NPM Packages to Project

  • Before proceeding 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 or ng serve -o for a dev server. Navigate to http://localhost:4200/ . The app will automatically reload if you change any of the source files.

Code Scaffolding's

  • Run ng g m module-name to generate a new module.
  • Run ng g c component-name to generate a new component. You can also use ng g directive/pipe/service/class


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

What's included?

Root Folder Structure

- The src/ folder is just one of the items inside the project's root folder. Other files help you build, test, maintain, document, and deploy the app. These files go in the root folder next to src/.

  • Gradient Able
    • e2e/...
    • node_modules/...
    • src/...
    • .angular-cli.json
    • .editorconfig
    • .gitignore
    • karma.conf.js
    • package.json
    • protractor.conf.js
    • tsconfig.json
    • tslint.json
Sr. No. Directory/File Description
1 Inside e2e/ live the end-to-end tests. They shouldn't be inside src/ because e2e tests are really a separate app that just so happens to test your main app. That's also why they have their own tsconfig.e2e.json.
2 Node.js creates this folder and puts all third party modules listed in package.json inside of it.
3 Configuration for Angular CLI. In this file you can set several defaults and also configure what files are included when your project is built. Check out the official documentation if you want to know more.
4 Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Most editors support an .editorconfig file
5 Git configuration to make sure autogenerated files are not commited to source control.
6 Unit test configuration for the Karma test runner, used when running ng test.
7 npm configuration listing the third party packages your project uses. You can also add your own custom scripts here.
8 End-to-end test configuration for Protractor, used when running ng e2e.
9 Basic documentation for your project, pre-filled with CLI command information. Make sure to enhance it with project documentation so that anyone checking out the repo can build your app!
10 TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
11 Linting configuration for TSLint together with Codelyzer, used when running ng lint. Linting helps keep your code style consistent.

Src/.. Folder Structure

  • src/...
    • app/...
      • layout/...
      • shared/...
      • theme/...
      • app.component.scss
      • app.component.html
      • app.component.spec.ts
      • app.component.ts
      • app.module.ts
      • app-routing.module.ts
    • assets/...
        • .gitkeep
    • environments/...
    • favicon.ico
    • index.html
    • main.ts
    • polyfills.ts
    • styles.scss
    • test.ts
    • tsconfig.{app|spec}.json
Sr. No. Directory/File Description
1 Main Directory for Production
2 Project Root Directory
3 Common Part of Template like - Header, Footer, Sidebar, Configuration, Chat, InnerChat
4 Common Modules and Components like - Cards, Models, Accordion, Directive, Services, Menu, Interface, Pipes
5 Contains whole project separate modules
6 Defines the AppComponent along with an HTML template, CSS stylesheet, and a unit test. It is the root component of what will become a tree of nested components as the application evolves.
7 Defines AppModule, the root module that tells Angular how to assemble the application.
8 main routing for lasy loading
9 A folder where you can put images and anything else to be copied wholesale when you build your application.
10 This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application.
11 Every site wants to look good on the bookmark bar. Get started with your very own Angular icon.
12 The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it. The CLI automatically adds all js and css files when building your app so you never need to add any script or link tags here manually.
13 The main entry point for your app.
14 Different browsers have different levels of support of the web standards. Polyfills help normalize those differences.
15 Your custom/global styles go here.
16 This is the main entry point for your unit tests.
17 TypeScript compiler configuration for the Angular app.
18 for the unit tests

HTML Structure

Header Structure

<div class="pcoded-container navbar-wrapper">
    <nav class="navbar header-navbar pcoded-header"  [attr.header-theme]="headerTheme" [attr.pcoded-header-position]="pcodedHeaderPosition">
        <div class="navbar-wrapper">
            <div class="navbar-logo">
                <!--- nav-bar content -->
            <div class="navbar-container container-fluid">
                <ul class="nav-left">
                    <!--- nav-bar left content -->
                <ul class="nav-right">
                    <!--- nav-bar right content -->

Sidebar/Menu Structure

<nav id="main_navbar" class="pcoded-navbar">
    <div class="pcoded-inner-navbar main-menu" appAccordion>
        <div class="">
            <div class="main-menu-header">
                <!--- menu main header -->
            <div class="main-menu-content">
                <!--- menu main content -->
        <div class="d-color">
            <div class="pcoded-navigation-label" []="menuTitleTheme">Navigation</div>
            <ul class="pcoded-item pcoded-left-item">
                    <a [routerLinkActive]="['active']" [routerLink]="['/', 'home', 'default']" class="ripple" appAccordionToggle>
                        <span class="pcoded-micon"><i class="feather icon-home"></i><b>Home</b></span>
                        <span class="pcoded-mtext">Home</span>
                        <span class="pcoded-badge label label-success">New</span>
                        <span class="pcoded-mcaret"></span>
                <li [routerLinkActive]="['active']" class="pcoded-hasmenu">
                    <a [routerLinkActive]="['active']" href="javascript:;" class="ripple" appAccordionToggle>
                        <span class="pcoded-micon"><i class="feather icon-users"></i><b>Widget</b></span>
                        <span class="pcoded-mtext">Widget</span>
                        <span class="pcoded-badge label label-success">Latest</span>
                        <span class="pcoded-mcaret"></span>
                    <ul class="pcoded-submenu">
                            <a [routerLinkActive]="['active']" [routerLink]="['/', 'home', 'default']" class="ripple" appAccordionToggle>
                                <span class="pcoded-micon"><i class="feather icon-globe"></i><b>Default</b></span>
                                <span class="pcoded-mtext">Default</span>
                                <span class="pcoded-badge label label-success">5+</span>
                                <span class="pcoded-mcaret"></span>

Main Structure

<div id="pcoded" class="pcoded">
    <div class="pcoded-overlay-box"></div>
    <div class="pcoded-container navbar-wrapper">
        <nav class="navbar header-navbar pcoded-header">
            <!--- header structure -->
        <div id="sidebar" class="users p-chat-user showChat">
            <!--- chat user list -->
        <div class="showChat_inner">
            <!--- chat messages -->
        <div class="pcoded-main-container" [style.margin-top]="headerFixedMargin">
            <div class="pcoded-wrapper">
                <nav id="main_navbar" class="pcoded-navbar">
                    <!--- sidebar/menu structure -->
                <div class="pcoded-content">
                    <div class="pcoded-inner-content">
                        <div class="main-body">
                            <div class="page-wrapper">
                                <!--- page main body -->

Card Structure & Options

Card Structure

<div class="card {{ fullCard }} {{ cardLoad }}" [@cardClose]="cardClose" [ngClass]="cardClass">
  <div class="card-header" *ngIf="title" demoRipple [ngClass]="headerClass">
    <h5>{{ title }}</h5>
    <span *ngIf="!classHeader">{{ headerContent }}</span>
    <span *ngIf="classHeader">
      <!--- card header html caption -->
    <div class="card-header-right" *ngIf="!cardOptionBlock">
      <ul class="list-unstyled card-option" [@cardIconToggle]="cardIconToggle">
        <li *ngIf="!isCardToggled" (click)="toggleCardOption()"><i class="feather open-card-option icon-chevron-left"></i></li>
        <li><i class="feather {{ fullCardIcon }} full-card" (click)="fullScreen($event)"></i></li>
        <li><i class="feather minimize-card icon-minus" appCardToggleEvent (click)="toggleCard($event)"></i></li>
        <li><i class="feather icon-refresh-cw reload-card" (click)="cardRefresh($event)" ></i></li>
        <li><i class="feather icon-trash close-card" (click)="closeCard($event)"></i></li>
        <li *ngIf="isCardToggled" (click)="toggleCardOption()"><i class="feather open-card-option icon-x"></i></li>

  <div [@cardToggle]="cardToggle" class="card-block-hid">
    <div class="card-block" [ngClass]="blockClass">
      <!--- card content -->

  <div class="card-loader" *ngIf="loadCard"><i class="fa fa-spinner rotate-refresh"></i></div>

Card Options

Sr. No. Attributes/Class/Tag Description
1 tag for used function card at any where in theme directory with import SharedModule
2 add custom class with card
3 set card title
4 add custom class with card-header
5 if true: add p tag with class code-header
6 card options like: toggle, full-screen card, minimize, refresh, close
7 add custom class with card-block or card-body

Theme Customization

Customization Options

Sr. No. Options (Attributes) Description
1 Plugins Provide horizontal and vertical navigation. you can adapt them to your website's requeriments. value should be vertical , horizontal
2 Plugins Provide Click and Hover trigger on different level. This Menu trigger option work only first level. you can adapt them to your website's requeriments. value should be click , hover
3 This option working same as MenuTrigger: option. but its work on all menu level rather then first level. This option is most useful in vertical navigation you can adapt them to your website's requeriments. value should be click , hover
4 This option place active class on clicked menu item and its parent menu item . value should be active
5 Use this option to set background of header on pcoded class. value should be theme1, theme2, theme3, theme4, theme5, theme6
6 Use this option to set single color or multicolor icon on navbar icon. value should be st1, st2
7 Use this option to set light or dark layout of theme. value should be light, dark
8 Use this option to set background pattern on body.value should be theme1, theme2, theme3, theme4, theme5, theme6
this option will only work if you have selected verticalMenulayout:"box"
9 Use this option to set background color on Right Header. Plugins provide 9 header background. value should be theme1, theme2, theme3, theme4, theme5, theme6
10 Use this option to set background color on Left Header. Plugins provide 9 left header background. value should be theme1, theme2, theme3, theme4, theme5, theme6
11 Use this option to set background color on Navigation. Plugins provide 9 navigation background.
value should be theme1, themelight1
12 Use this option to set background color on Active Menu Item. Plugins provide 9 background 9 on Active Menu Item.
value should be theme1, theme2, theme3, theme4, theme5, theme6, theme7, theme8, theme9, theme10, theme11, theme12
This option will only work if you have selected ActiveItemStyle:"style1" Option.
13 Still this features not working
14 You can change Active Item Style by use this option. value should be style0, style1
if you choose style0 then default option style will work.
15 Use this option to set or remove border on menu item .on value should be true, false
Default option is true
16 Use this option to set border style . Plugin provide 3 border style.value should be solid/dotted/dashed
Default Option is solid
This option will work if you have choose ItemBorder:"true".
17 Plugin provide 3 style to change drop down menu item icons. value should be style1/style2/style3
Default option value is style1
18 Use this option to fix navigation. value should be true, false
Default option value is false
19 Use this option to fix header. value should be true, false
Default option value is false
This Option work only vertical navigation.
20 Use this option to place sidebar on left and right side. value should be left, right
Default option value is left
21 Plugin provide three type menu layout . value should be wide, box
Default option value is wide
22 This option provide ability to change the sub menu item icons style on vertical navigation. value should be style1 to style6 or no icon
Default option value is style1
23 Plugin provide three navigation effect. you can set menu effect according to device. value should be shrink,push,overlay
Default option value on desktop is shrink
Default option value on tablet is push
Default option value on phone is overlay
24 Plugin provide multi vertical navigation style. you can set defalult navigation style accoding to device. value should be expanded,collapsed,offcanvas,compact,fullpage,ex-popover,sub-expanded
Default option value on desktop is expanded
Default option value on tablet is collapsed
Default option value on phone is offcanvas
25 Plugin provide change vertical navigation on toggle according to different device and size. value should be expanded,collapsed,offcanvas,compact,fullpage,ex-popover,sub-expanded
Default option value on desktop is collapsed
Default option value on tablet is expanded
Default option value on phone is expanded

Third Party Plugins

Sources & Credits Documentation

Sr. No. Plugins URL

Change Log

Gradient Able change log


CLI 1.7.3 supported
    - Properly parse CSS variables that begin with interpolation
    - Generate correct source maps for main scss
    - Add more advance widget
    - fix bug: real time charts
    - effective navigation and breadcrumbs add
    - fix bug: basic alert
    - fix bug: responsive tabs options
    - New Added Modules:-
        - proper star, bar, square rating
        - slider, range slider and scale slider
        - effective and proper landing page
        - email inbox with mail compose
        - and most important setup easy interface documentation

Upgrade to Gradient Able Angular CLI 1.7.3

How to upgrade from Gradient Able old version to Angular CLI 1.7.3?

- remove node_modules directory

- open node.js command prompt and set old project path

- run command 'npm install --save-dev @angular/cli@latest'