Color Admin

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.

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/

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

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

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

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

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

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
       });
    });
  }
}

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

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

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