8.0

Last Updated: 05/August/2019
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

### A) Installation - top

Follow the following step to install the angular 8 in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide

    <!-- copy the following folder-->
    /admin/template/assets/css
    /admin/template/assets/img

    <!-- paste it into angular 8 folder -->
    /admin/template/template_angular8/src/assets/

    <!-- run the following command -->
    cd /your-path-url/template_angular8
    npm install
    ng serve

    <!-- browse the url -->
    http://localhost:4200/

Verify that you are running at least node `10.9.x` or later and `npm 6.x.x` by running `node -v` and `npm -v` in a terminal/console window. Older versions produce errors, but newer versions are fine.

### B) File Structure - top

File structure overview for Angular JS 8 Version

    template_angularjs8/
    ├── angular.json
    ├── browserslist
    ├── karma.conf.js
    ├── package.json
    ├── protractor.conf.js
    ├── README.md
    ├── tsconfig.json
    ├── tslint.json
    ├── e2e/
    └── src/
        ├── favicon.ico
        ├── index.html
        ├── main.ts
        ├── polyfills.ts
        ├── styles.css
        ├── tsconfig.app.json
        ├── tsconfig.spec.json
        ├── typings.d.ts
        ├── app/
        │   ├── app.routing.module.ts
        │   ├── app.component.css
        │   ├── app.component.html
        │   ├── app.component.spec.ts
        │   ├── app.component.ts
        │   ├── app.module.ts
        │   ├── components/
        │   ├── config/
        │   └── pages/
        ├── assets/
        ├── environments/
        └── scss/

### C) Page Structure - top

Below is the code from `app.component.html` which include the loading bar, header, sidebar, right sidebar, top menu, page content and footer. You may remove the component if you are not using it.

    <ngx-loading-bar [ngClass]="{ 'top': pageSettings.pageEmpty }"></ngx-loading-bar>

    <!-- begin #page-container -->
    <div id="page-container" class="page-container fade page-sidebar-fixed page-header-fixed show" [ngClass]="{
      'has-scroll' : pageHasScroll,
      'page-sidebar-minified': pageSettings.pageSidebarMinified,
      'page-with-footer': pageSettings.pageWithFooter,
      'page-content-full-height': pageSettings.pageContentFullHeight,
      'page-without-sidebar': pageSettings.pageWithoutSidebar,
      'page-with-right-sidebar': pageSettings.pageSidebarRight,
      'page-with-two-sidebar': pageSettings.pageSidebarTwo,
      'page-with-wide-sidebar': pageSettings.pageSidebarWide,
      'page-right-sidebar-collapsed': pageSettings.pageSidebarRightCollapsed,
      'page-with-light-sidebar': pageSettings.pageSidebarLight,
      'page-with-top-menu': pageSettings.pageTopMenu,
      'page-sidebar-toggled': pageSettings.pageMobileSidebarToggled,
      'page-right-sidebar-toggled': pageSettings.pageMobileRightSidebarToggled,
      'p-0': pageSettings.pageEmpty
      }">

      <top-menu *ngIf="pageSettings.pageTopMenu && !pageSettings.pageEmpty"></top-menu>

      <header
        (toggleSidebarRightCollapsed)="onToggleSidebarRight($event)"
        (toggleMobileSidebar)="onToggleMobileSidebar($event)"
        (toggleMobileRightSidebar)="onToggleMobileRightSidebar($event)"
        [pageSidebarTwo]="pageSettings.pageSidebarTwo"
        *ngIf="!pageSettings.pageEmpty">
      </header>

      <sidebar
        (toggleSidebarMinified)="onToggleSidebarMinified($event)"
        (hideMobileSidebar)="onHideMobileSidebar($event)"
        *ngIf="!pageSettings.pageWithoutSidebar && !pageSettings.pageEmpty"
        [pageSidebarTransparent]="pageSettings.pageSidebarTransparent"
        [pageSidebarMinified]="pageSettings.pageSidebarMinified">
      </sidebar>

      <sidebar-right
        (hideMobileRightSidebar)="onHideMobileRightSidebar($event)"
        *ngIf="pageSettings.pageSidebarTwo && !pageSettings.pageEmpty">
      </sidebar-right>

      <div id="content" class="content"
        [ngClass]="{
          'content-full-width': pageSettings.pageContentFullWidth,
          'content-inverse-mode': pageSettings.pageContentInverseMode,
          'p-0 m-0': pageSettings.pageEmpty
        }">
      <router-outlet></router-outlet>
      </div>

      <footer *ngIf="pageSettings.pageWithFooter"></footer>
    </div>
    <!-- end #page-container -->

### D) Page Options - top

You may found the list of page options in `/src/app/config/page-settings.ts`. You may change the value from false to true if you wish to enable the options by page load.

    var pageSettings = {
      pageSidebarMinified: false,
      pageContentFullHeight: false,
      pageContentFullWidth: false,
      pageContentInverseMode: false,
      pageWithFooter: false,
      pageWithoutSidebar: false,
      pageSidebarRight: false,
      pageSidebarRightCollapsed: false,
      pageSidebarTwo: false,
      pageSidebarWide: false,
      pageSidebarTransparent: false,
      pageSidebarLight: false,
      pageTopMenu: false,
      pageEmpty: false,
      pageBodyWhite: false,
      pageMegaMenu: false,
      pageLanguageBar: false,
      pageMobileSidebarToggled: false,
      pageMobileSidebarFirstClicked: false,
      pageMobileSidebarRightToggled: false,
      pageMobileSidebarRightFirstClicked: false,
      pageMobileTopMenuToggled: false,
      pageMobileMegaMenuToggled: false
    };

    export default pageSettings;

If you wish to set the page options for individual page, below is the example of setting the page settings in controller.

    import { Component } from '@angular/core';
    import pageSettings from '../../config/page-settings';

    @Component({
      selector: 'page-blank',
      templateUrl: './page-blank.html'
    })

    export class PageBlank {
      pageSettings = pageSettings;

      constructor() {
        this.pageSettings.pageSidebarMinified = true;
      }
    }

### E) Using jQuery Plugins - top

Here is an example for how to use jQuery plugins in Angular 8 (DataTables)

NPM INSTALLATION:

    npm install @types/jquery --save
    npm install datatables
    npm install datatables.net-bs
    npm install datatables.net-responsive-bs

INCLUDE CSS: `/src/styles.css`

    @import "~datatables.net-bs/css/dataTables.bootstrap.min.css";
    @import "~datatables.net-responsive-bs/css/responsive.bootstrap.min.css";

TYPESCRIPT FILE:

    import { Component, OnInit, AfterViewInit } from '@angular/core';
    import * as $ from 'jquery';
    import 'datatables';
    import 'datatables.net-bs';
    import 'datatables.net-responsive-bs';

    @Component({
      selector: 'index',
      templateUrl: './index.html'
    })

    export class IndexPage implements AfterViewInit {
      ngAfterViewInit() {
        $(document).ready(function() {
           $('#data-table').DataTable({
            responsive: true
           });
        });
      }
    }

ADD THIS TO /src/typings.d.ts

    interface JQuery {
      DataTable(options?: any, callback?: Function) : any;
    }

### F) Using SCSS - top

You may include the color admin theme scss file from `/admin/src/scss/default/` as well.

    <!-- copy the following folder -->
    /admin/src/scss/default/

    <!-- paste & replace the file inside the following folder -->
    /admin/template/template_angular8/src/scss/

change the following code in `/template_angular8/angular.json`

    <!-- from LINE 25 -->
    "src/scss/angular.scss"

    <!-- to -->
    "src/scss/styles.scss"

remove the following code from `/template_angular8/src/styles.css`

    @import 'assets/css/default/app.min.css';

add the following code to `/template_angular8/src/scss/styles.scss`

    @import 'angular';

after you done all the steps before this, you may run the following command to start your angular 8 project.

    ng serve

### G) NPM Package - top

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. `https://www.npmjs.com/package/``@ng-bootstrap/ng-bootstrap`

    {
      "name": "color-admin",
      "version": "0.0.0",
      "license": "MIT",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@agm/core": "^1.0.0-beta.2",
        "@angular/animations": "^8.2.0",
        "@angular/cdk": "^8.1.2",
        "@angular/common": "^8.2.0",
        "@angular/compiler": "^8.2.0",
        "@angular/core": "^8.2.0",
        "@angular/forms": "^8.2.0",
        "@angular/material": "^8.1.2",
        "@angular/platform-browser": "^8.2.0",
        "@angular/platform-browser-dynamic": "^8.2.0",
        "@angular/router": "^8.2.0",
        "@fullcalendar/angular": "^4.2.1",
        "@fullcalendar/core": "^4.2.0",
        "@fullcalendar/daygrid": "^4.2.0",
        "@ng-bootstrap/ng-bootstrap": "^5.1.0",
        "@ngx-loading-bar/core": "^4.2.0",
        "@ngx-loading-bar/router": "^4.2.0",
        "@sweetalert2/ngx-sweetalert2": "^5.1.0",
        "@swimlane/ngx-charts": "^12.0.1",
        "@swimlane/ngx-datatable": "git+https://github.com/zackarychapple/ngx-datatable.git",
        "angular-calendar": "^0.27.14",
        "angular2-fullcalendar": "^1.0.19",
        "bootstrap": "^4.3.1",
        "bootstrap-social": "^5.1.1",
        "chart.js": "^2.8.0",
        "core-js": "^3.1.4",
        "d3": "^3.5.17",
        "dart-sass": "^1.22.9",
        "date-fns": "^1.30.1",
        "fibers": "^4.0.1",
        "flag-icon-css": "^3.3.0",
        "ng2-nvd3": "^2.0.0",
        "ng4-charts": "^1.0.2",
        "ngx-chips": "^2.0.2",
        "ngx-countdown": "^3.2.0",
        "ngx-datatable": "^1.0.3",
        "ngx-highlight-js": "^2.1.1",
        "ngx-nvd3": "^1.0.9",
        "ngx-perfect-scrollbar": "^8.0.0",
        "ngx-trend": "^3.4.3",
        "nvd3": "^1.8.6",
        "rxjs": "^6.5.2",
        "rxjs-compat": "^6.5.2",
        "simple-line-icons": "^2.4.1",
        "sweetalert2": "^8.15.0",
        "tslib": "^1.10.0",
        "zone.js": "~0.10.0"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.802.0",
        "@angular/cli": "^8.2.0",
        "@angular/compiler-cli": "^8.2.0",
        "@angular/language-service": "^8.2.0",
        "@types/jasmine": "^3.3.16",
        "@types/jasminewd2": "~2.0.6",
        "@types/node": "^12.6.8",
        "codelyzer": "^5.1.0",
        "jasmine-core": "^3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "^4.2.0",
        "karma-chrome-launcher": "~3.0.0",
        "karma-coverage-istanbul-reporter": "^2.1.0",
        "karma-jasmine": "^2.0.1",
        "karma-jasmine-html-reporter": "^1.4.2",
        "protractor": "^5.4.2",
        "ts-node": "^8.3.0",
        "tslint": "^5.18.0",
        "typescript": "3.5.3"
      }
    }