Dependencies and Support

- used latest node.js and angular-cli

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
  • README.md
  • tsconfig.json
  • tslint.json

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

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

<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

<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

<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

Menu Options

Menu Interfaces

export interface Menu {
    label: string;
    main: MainMenuItems[];
}

export interface MainMenuItems {
    state: string;
    short_label?: string;
    main_state?: string;
    target?: boolean;
    name: string;
    type: string;
    icon: string;
    badge?: BadgeItem[];
    children?: ChildrenItems[];
}

export interface ChildrenItems {
    state: string;
    target?: boolean;
    name: string;
    type?: string;
    children?: ChildrenItems[];
}

export interface BadgeItem {
    type: string;
    value: string;
}

Menu Parameters

Theme Customization

Customization Options

Third Party Plugins

Sources & Credits Documentation

Change Log

Gradient Able change log

v3.1
-------------------------
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'