Support, all rights reserved © 2018
Guru Able Angular 11+ docs.
Live Preview Buy Now

Guru Able Angular 11+ Admin

Template Documentation

Thank you for downloading Guru Able Angular 11+ 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: 25th Dec, 2020

all rights reserved 2018©phoenixcoded

Guru Able is super clean, modern, responsive, powerful and flexible admin template based on Angular 11+ and bootstrap 4. The Angular CLI 11.0.4 makes it easy to maintain this application. Guru Able angular 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

Dependencies

Bowser Support

  • IE10+
  • FireFox
  • Chrome
  • Opera
  • Safari

Getting started

Guru 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

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

  • Guru Able
    • 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 e2e/ 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_modules/ Node.js creates this folder and puts all third party modules listed in package.json inside of it.
3 .angular-cli.json 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 .editorconfig 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 .gitignore Git configuration to make sure autogenerated files are not commited to source control.
6 karma.conf.js Unit test configuration for the Karma test runner, used when running ng test.
7 package.json npm configuration listing the third party packages your project uses. You can also add your own custom scripts here.
8 protractor.conf.js End-to-end test configuration for Protractor, used when running ng e2e.
9 README.md 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 tsconfig.json TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
11 tslint.json 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 src/.. Main Directory for Production
2 app/ Project Root Directory
3 layout/ Common Part of Template like - Header, Footer, Sidebar, Configuration, Chat, InnerChat
4 shared/ Common Modules and Components like - Cards, Models, Accordion, Directive, Services, Menu, Interface, Pipes
5 theme/ Contains whole project separate modules
6 app/app.component.{ts,html,css,spec.ts} 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 app.module.ts Defines AppModule, the root module that tells Angular how to assemble the application.
8 app-routing.module.ts main routing for lasy loading
9 assets/ A folder where you can put images and anything else to be copied wholesale when you build your application.
10 environments This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application.
11 favicon.ico Every site wants to look good on the bookmark bar. Get started with your very own Angular icon.
12 index.html 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 main.ts The main entry point for your app.
14 polyfills.ts Different browsers have different levels of support of the web standards. Polyfills help normalize those differences.
15 styles.css Your custom/global styles go here.
16 test.ts This is the main entry point for your unit tests.
17 tsconfig.app.json TypeScript compiler configuration for the Angular app.
18 tsconfig.spec.json for the unit tests

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 <app-card></app-card> tag for used function card at any where in theme directory with import SharedModule
2 cardClass: string add custom class with card
3 title: string set card title
4 headerClass: string add custom class with card-header
5 classHeader: boolean (default: false) if true: add p tag with class code-header
6 cardOptionBlock: boolean (default: false) card options like: toggle, full-screen card, minimize, refresh, close
7 blockClass add custom class with card-block or card-body

Theme Customization

Customization Options

Sr. No. Options (Attributes) Description
1 themelayout (themeLayout): Plugins Provide horizontal and vertical navigation. you can adapt them to your website's requeriments. value should be vertical , horizontal
2 MenuTrigger: 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 SubMenuTrigger: 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 activeMenuClass: This option place active class on clicked menu item and its parent menu item . value should be active
5 freamtype (freamType): Use this option to set background of header on pcoded class. value should be theme1, theme2, theme3, theme4, theme5, theme6
6 menutype (navType): Use this option to set single color or multicolor icon on navbar icon. value should be st1, st2
7 layouttype (layoutType): Use this option to set light or dark layout of theme. value should be light, dark
8 ThemeBackgroundPattern (setBackgroundPattern): 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 HeaderBackground (headerTheme): 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 LHeaderBackground (headerTheme): 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 NavbarBackground(navBarTheme): Use this option to set background color on Navigation. Plugins provide 9 navigation background.
value should be theme1, themelight1
12 ActiveItemBackground(activeItemTheme): 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 SubItemBackground: Still this features not working
14 ActiveItemStyle: 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 ItemBorder (itemBorder/subItemBorder): Use this option to set or remove border on menu item .on value should be true, false
Default option is true
16 ItemBorderStyle (itemBorderStyle): 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 DropDownIconStyle (dropDownIcon): Plugin provide 3 style to change drop down menu item icons. value should be style1/style2/style3
Default option value is style1
18 FixedNavbarPosition (isSidebarChecked): Use this option to fix navigation. value should be true, false
Default option value is false
19 FixedHeaderPosition (isHeaderChecked): Use this option to fix header. value should be true, false
Default option value is false
This Option work only vertical navigation.
20 verticalMenuplacement (verticalPlacement): Use this option to place sidebar on left and right side. value should be left, right
Default option value is left
21 verticalMenulayout (verticalLayout): Plugin provide three type menu layout . value should be wide, box
Default option value is wide
22 VerticalSubMenuItemIconStyle (subItemIcon): 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 verticalMenueffect:{
   desktop : " ",
   tablet : " ",
   phone : " ",
} (verticalEffect) 		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 defaultVerticalMenu: {
   desktop : "expanded",
   tablet : "collapsed",
   phone : "offcanvas",
} (verticalNavType) 		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 onToggleVerticalMenu : {
   desktop : "collapsed",
   tablet : "expanded",
   phone : "expanded",
} (verticalNavType) 		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 NODE.js https://nodejs.org
2 Angular https://angular.io/
3 webpack https://www.npmjs.com/package/webpack
4 sweetalert2 https://www.npmjs.com/package/sweetalert2
5 screenfull https://www.npmjs.com/package/screenfull
6 ngx-perfect-scrollbar https://www.npmjs.com/package/ngx-perfect-scrollbar
7 ngx-color-picker https://www.npmjs.com/package/ngx-color-picker
8 ngx-chips https://github.com/Gbuomprisco/ngx-chips
9 ngx-carousel https://www.npmjs.com/package/ngx-carousel
10 hammerjs https://www.npmjs.com/package/ngx-carousel
11 ngx-bar-rating https://github.com/MurhafSousli/ngx-bar-rating
12 ng2-validation https://github.com/yuyang041060120/ng2-validation
13 ng2-ui-switch https://www.npmjs.com/package/ng2-ui-switch
14 ng2-toasty https://github.com/akserg/ng2-toasty
15 ng2-google-charts https://www.npmjs.com/package/ng2-google-charts
16 ng2-file-upload https://github.com/valor-software/ng2-file-upload
17 ng-select https://basvandenberg.github.io/ng-select#/getting-started
18 ng-click-outside https://www.npmjs.com/package/ng-click-outside
19 jquery https://www.npmjs.com/package/jquery
20 font-awesome-scss https://www.npmjs.com/package/font-awesome-scss
21 famfamfam-flags https://www.npmjs.com/package/famfamfam-flags
22 d3 https://www.npmjs.com/package/d3
23 css-animator https://www.npmjs.com/package/css-animator
24 c3 https://www.npmjs.com/package/c3
25 bootstrap https://www.npmjs.com/package/bootstrap
26 angular2-notifications https://github.com/flauc/angular2-notifications
27 angular-bootstrap-md https://www.npmjs.com/package/angular-bootstrap-md
28 angular2-chartjs https://www.npmjs.com/package/angular2-chartjs
29 @swimlane/ngx-datatable https://github.com/swimlane/ngx-datatable
30 @ng-bootstrap/ng-bootstrap https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap
31 @agm/core https://github.com/SebastianM/angular-google-maps
32 angular-calendar https://github.com/mattlewis92/angular-calendar#getting-started
33 angular-draggable-droppable https://www.npmjs.com/package/angular-draggable-droppable
34 ng2-archwizard https://www.npmjs.com/package/ng2-archwizard
35 ng2-dragula https://github.com/valor-software/ng2-dragula
36 angular2-lightbox https://github.com/themyth92/angular2-lightbox
37 nouislider ng2-nouislider https://github.com/tb/ng2-nouislider
38 ngx-tour-ng-bootstrap https://isaacplmann.github.io/ngx-tour/ng-bootstrap
39 angular-tree-component https://angular2-tree.readme.io/docs/getting-started

Change Log

Guru Able change log

copy 

    - 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 Guru Able Angular CLI 11.0.4

How to upgrade from Guru Able old version to Angular CLI 11.0.4?

- remove node_modules directory

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

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