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

Able Pro 7 Angular 5+ Admin

Template Documentation

Thank you for downloading Able Pro 7 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: 18th April, 2018

all rights reserved 2018©phoenixcoded


Able Pro 7 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. Able Pro 7 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

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

Building

  • 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/.

  • Able Pro 7
    • e2e/...
    • node_modules/...
    • src/...
    • .angular-cli.json
    • .editorconfig
    • .gitignore
    • karma.conf.js
    • package.json
    • protractor.conf.js
    • README.md
    • 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/...
    • scss/...
    • 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

Style Customization

SCSS Folder Structure

- manages all scss files in scss/ folder and it also allows users to add their own scss files inside this folder.

  • scss
    • partials/...
      • menu/...
      • ngx-scss/...
      • other/...
      • pages/...
      • responsive/...
      • tables/...
      • theme-elements/...
      • widget-dashboard/...
      • _custom.scss
      • _dark.scss
      • _general.scss
      • _generic.scss
      • _mixins.scss
      • _variables.scss
    • themify-icons/...
    • animation.scss
    • pages.scss
    • style.scss
    • widget.scss
Sr. No. Module Description
1 bootstrap 4 scss includes from '~bootstrap/scss/bootstrap'
2 includes from partials/ directory
3 used from themify-icons and assets/icons
4 contain colors, buttons, shadows, typography and utilities mixins
5 custom style for particular elements or cards

HTML Structure

Header Structure

copy
<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>
            <div class="navbar-container container-fluid">
                <ul class="nav-left">
                    <!--- nav-bar left content -->
                </ul>
                <ul class="nav-right">
                    <!--- nav-bar right content -->
                </ul>
            </div>
        </div>
    </nav>
</div>

Sidebar/Menu Structure

copy
<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>
            <div class="main-menu-content">
                <!--- menu main content -->
            </div>
        </div>
        <div class="d-color">
            <div class="pcoded-navigation-label" [attr.menu-title-theme]="menuTitleTheme">Navigation</div>
            <ul class="pcoded-item pcoded-left-item">
                <li>
                    <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>
                    </a>
                </li>
                <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>
                    </a>
                    <ul class="pcoded-submenu">
                        <li>
                            <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>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Main Structure

copy
<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 -->
        </nav>
        <div id="sidebar" class="users p-chat-user showChat">
            <!--- chat user list -->
        </div>
        <div class="showChat_inner">
            <!--- chat messages -->
        </div>
        <div class="pcoded-main-container" [style.margin-top]="headerFixedMargin">
            <div class="pcoded-wrapper">
                <nav id="main_navbar" class="pcoded-navbar">
                    <!--- sidebar/menu structure -->
                </nav>
                <div class="pcoded-content">
                    <app-breadcrumbs></app-breadcrumbs>
                    <div class="pcoded-inner-content">
                        <div class="main-body">
                            <div class="page-wrapper">
                                <app-spinner></app-spinner>
                                <!--- page main body -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Card Structure & Options

Card Structure

copy
<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 -->
    </span>
    <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>
      </ul>
    </div>
  </div>

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

  <div class="card-loader" *ngIf="loadCard"><i class="fa fa-spinner rotate-refresh"></i></div>
</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
1 https://nodejs.org
2 https://angular.io/
3 https://www.npmjs.com/package/webpack
4 https://www.npmjs.com/package/sweetalert2
5 https://www.npmjs.com/package/screenfull
6 https://www.npmjs.com/package/ngx-perfect-scrollbar
7 https://www.npmjs.com/package/ngx-color-picker
8 https://github.com/Gbuomprisco/ngx-chips
9 https://www.npmjs.com/package/ngx-carousel
10 https://www.npmjs.com/package/ngx-carousel
11 https://github.com/MurhafSousli/ngx-bar-rating
12 https://github.com/yuyang041060120/ng2-validation
13 https://www.npmjs.com/package/ng2-ui-switch
14 https://github.com/akserg/ng2-toasty
15 https://www.npmjs.com/package/ng2-google-charts
16 https://github.com/valor-software/ng2-file-upload
17 https://basvandenberg.github.io/ng-select#/getting-started
18 https://www.npmjs.com/package/ng-click-outside
19 https://www.npmjs.com/package/jquery
20 https://www.npmjs.com/package/font-awesome-scss
21 https://www.npmjs.com/package/famfamfam-flags
22 https://www.npmjs.com/package/d3
23 https://www.npmjs.com/package/css-animator
24 https://www.npmjs.com/package/c3
25 https://www.npmjs.com/package/bootstrap
26 https://github.com/flauc/angular2-notifications
27 https://www.npmjs.com/package/angular-bootstrap-md
28 https://www.npmjs.com/package/angular2-chartjs
29 https://github.com/swimlane/ngx-datatable
30 https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap
31 https://github.com/SebastianM/angular-google-maps
32 https://github.com/mattlewis92/angular-calendar#getting-started
33 https://www.npmjs.com/package/angular-draggable-droppable
34 https://www.npmjs.com/package/ng2-archwizard
35 https://github.com/valor-software/ng2-dragula
36 https://github.com/themyth92/angular2-lightbox
37 https://github.com/tb/ng2-nouislider
38 https://isaacplmann.github.io/ngx-tour/ng-bootstrap
39 https://angular2-tree.readme.io/docs/getting-started
40 https://github.com/M-Ulyanov/ng2-inputmask
41 https://github.com/text-mask/text-mask/tree/master/angular2#readme
42 https://github.com/cesarrew/ng2-currency-mask

Change Log

Able pro 7.0 change log

copy

    1. bug fixed
         - event calendar icon error
         - bootstrap datepicker
         - destroy chart interval
         - box-shadow tooltip text
         - offline ui header backgroud color
         - animation modal header style
         - reload slider failed
         - edit age column in editable data-table
         - remove sidebar  hover transitions
    2. Fixes - Collapse side bar Navigation sub menu does not appear on hover
    3. remove custom configuration notification from mobile dashboard
    4. new add features
         - set horizontal layout
         - crm contact pages
         - quill and froala wysiwyg editor
         - more angular datatable
         - annimation accordion
         - angular landing page
         - error pages
         - coming soon page
         - input masking
         - color card
    5. update side navbar active item style

Upgrade to Able pro 7.0

How to upgrade from able pro v7.1 to 7.2?

- replace all assets and css

- add new added components adn shared elements

- update latest node

- update latest angular CLI global package

- remove node_modules directory form project source

- update latest angular cli by 'npm install --save-dev @angular/[email protected]'

- enjoy latest angular able pro 7.0