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

<!-- run the following command -->
cd /your-path-url/template_angular10
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.

---

Copy over the required image from global assets folder

<!-- copy the following folder-->
/admin/template/assets/img
 
<!-- paste it into Angular 10 folder -->
/admin/template/template_angular10/src/assets/img

File structure overview for Angular JS 8 Version

template_angularjs10/
├── angular.json
├── 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,
  pageSidebarSearch: 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;
}

Angular 10 now is fully configured with scss file settings. You may include / switch the Color Admin theme by changing the file /admin/src/scss/angular.scss.

@import 'default/styles';

<!-- other themes -->
@import 'apple/styles';
@import 'facebook/styles';
@import 'google/styles';
@import 'material/styles';
@import 'transparent/styles';

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",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular-devkit/build-angular": "^0.1001.7",
    "@angular/animations": "^10.1.6",
    "@angular/cdk": "^10.2.5",
    "@angular/common": "^10.1.6",
    "@angular/compiler": "^10.1.6",
    "@angular/core": "^10.1.6",
    "@angular/forms": "^10.1.6",
    "@angular/localize": "^10.1.6",
    "@angular/material": "^10.2.5",
    "@angular/platform-browser": "^10.1.6",
    "@angular/platform-browser-dynamic": "^10.1.6",
    "@angular/router": "^10.1.6",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@fullcalendar/angular": "^5.3.1",
    "@fullcalendar/bootstrap": "^5.3.1",
    "@fullcalendar/core": "^5.3.1",
    "@fullcalendar/daygrid": "^5.3.2",
    "@fullcalendar/interaction": "^5.3.1",
    "@fullcalendar/list": "^5.3.1",
    "@fullcalendar/resource-timegrid": "^5.3.1",
    "@fullcalendar/timegrid": "^5.3.1",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@ngx-loading-bar/core": "^5.1.0",
    "@ngx-loading-bar/router": "^5.1.0",
    "@sweetalert2/ngx-sweetalert2": "^8.1.1",
    "@swimlane/ngx-charts": "^16.0.0",
    "@swimlane/ngx-datatable": "^18.0.0",
    "angular-calendar": "^0.28.22",
    "bootstrap": "^4.5.3",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^2.9.4",
    "core-js": "^3.6.5",
    "d3": "^3.5.17",
    "dart-sass": "^1.25.0",
    "date-fns": "^2.16.1",
    "fibers": "^5.0.0",
    "flag-icon-css": "^3.5.0",
    "moment": "^2.29.1",
    "ng-chartjs": "^0.2.1",
    "ng2-nvd3": "^2.0.0",
    "ng4-charts": "^1.0.2",
    "ngx-chips": "^2.2.1",
    "ngx-countdown": "^10.0.1",
    "ngx-daterangepicker-material": "^4.0.1",
    "ngx-highlight-js": "^10.0.3",
    "ngx-perfect-scrollbar": "^10.0.1",
    "ngx-trend": "^6.0.0",
    "nvd3": "^1.8.6",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.6.3",
    "simple-line-icons": "^2.5.5",
    "sweetalert2": "^10.6.1",
    "tslib": "^2.0.3",
    "zone.js": "~0.11.2"
  },
  "devDependencies": {
    "@angular/cli": "^10.1.7",
    "@angular/compiler-cli": "^10.1.6",
    "@angular/language-service": "^10.1.6",
    "@types/jasmine": "^3.5.14",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^14.11.10",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~6.0.0",
    "karma": "~5.2.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "ts-node": "^9.0.0",
    "tslint": "~6.1.3",
    "typescript": "^4.0.3"
  }
}