Admin Template

Color Admin

“Angular 17 Version” Documentation by “Sean Ngu” v5.3.3

17.0

Last Updated: 28/March/2024
By: Sean Ngu

If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question or send me an email via support email. Thanks so much!

* Support email can be found via downloaded version of Color Admin

A) Installation - top

Follow the following step to install the angular 17 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_angularjs17
npm install --force
ng serve

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

Verify that you are running at least node 20.x.x or later and npm 10.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 17 folder -->
/admin/template/template_angularjs17/src/assets/img

B) File Structure - top

File structure overview for Angular JS 17 Version

template_angularjs17/
├── 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.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': appSettings.appEmpty }"></ngx-loading-bar>

<!-- BEGIN #app -->
<div id="app" class="app" [ngClass]="{
    'has-scroll' : appHasScroll,
    'app-sidebar-minified': appSettings.appSidebarMinified,
    'app-sidebar-fixed': !appSettings.appSidebarNone && appSettings.appSidebarFixed,
    'app-header-fixed': !appSettings.appHeaderNone && appSettings.appHeaderFixed,
    'app-without-sidebar': appSettings.appSidebarNone || appSettings.appEmpty,
    'app-without-header': appSettings.appHeaderNone || appSettings.appEmpty,
    'app-with-end-sidebar': appSettings.appSidebarEnd,
    'app-with-two-sidebar': appSettings.appSidebarTwo,
    'app-with-wide-sidebar': appSettings.appSidebarWide,
    'app-sidebar-end-toggled': appSettings.appSidebarEndToggled,
    'app-sidebar-mobile-toggled': appSettings.appSidebarMobileToggled,
    'app-content-full-height': appSettings.appContentFullHeight,
    'app-with-top-menu': appSettings.appTopMenu,
    'app-sidebar-end-mobile-toggled': appSettings.appSidebarEndMobileToggled,
    'app-gradient-enabled': appSettings.appGradientEnabled,
    'p-0': appSettings.appEmpty
  }">

  <top-menu *ngIf="appSettings.appTopMenu && !appSettings.appEmpty"></top-menu>

  <header 
    (appSidebarMobileToggled)="onAppSidebarMobileToggled($event)" 
    (appSidebarEndToggled)="onAppSidebarEndToggled($event)" 
    (appSidebarEndMobileToggled)="onAppSidebarEndMobileToggled($event)" 
    [appSidebarTwo]="appSettings.appSidebarTwo" 
    *ngIf="!appSettings.appEmpty && !appSettings.appHeaderNone">
  </header>

  <sidebar 
    (appSidebarMinifiedToggled)="onAppSidebarMinifiedToggled($event)" 
    (appSidebarMobileToggled)="onAppSidebarMobileToggled($event)" 
    [appSidebarTransparent]="appSettings.appSidebarTransparent" 
    [appSidebarMinified]="appSettings.appSidebarMinified"
    [appSidebarGrid]="appSettings.appSidebarGrid"
    [appSidebarFixed]="appSettings.appSidebarFixed"
    *ngIf="!appSettings.appSidebarNone && !appSettings.appEmpty">
  </sidebar>

  <sidebar-right 
    (appSidebarEndMobileToggled)="onAppSidebarEndMobileToggled($event)"
    *ngIf="appSettings.appSidebarTwo && !appSettings.appEmpty">
  </sidebar-right>

  <div id="content" class="app-content" [ngClass]="appSettings.appContentClass + ' ' + (appSettings.appEmpty ? 'p-0 m-0' : '')">
    <router-outlet></router-outlet>
  </div>
  
  <theme-panel
    (appDarkModeChanged)="onAppDarkModeChanged($event)"
    (appThemeChanged)="onAppThemeChanged($event)"
    *ngIf="!appSettings.appThemePanelNone"
    ></theme-panel>
</div>
<!-- END #app -->

D) Page Options - top

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

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AppSettings {
  public appTheme: string = '';
  public appCover: string = '';
  public appDarkMode: boolean = false;
  public appEmpty: boolean = false;
  public appGradientEnabled: boolean = false;
  public appBodyWhite: boolean = false;
  public appThemePanelNone: boolean = false;
  
  public appBoxedLayout: boolean = false;
  public appHeaderNone: boolean = false;
  public appHeaderFixed: boolean = true;
  public appHeaderInverse: boolean = false;
  public appHeaderMegaMenu: boolean = false;
  public appHeaderLanguageBar: boolean = false;
  public appHeaderMegaMenuMobileToggled: boolean = false;
  public appTopMenu: boolean = false;
  public appFooter: boolean = false;
  
  public appSidebarEnd: boolean = false;
  public appSidebarTwo: boolean = false;
  public appSidebarNone: boolean = false;
  public appSidebarGrid: boolean = false;
  public appSidebarWide: boolean = false;
  public appSidebarLight: boolean = false;
  public appSidebarFixed: boolean = true;
  public appSidebarSearch: boolean = false;
  public appSidebarMinified: boolean = false;
  public appSidebarCollapsed: boolean = false;
  public appSidebarTransparent: boolean = false;
  public appSidebarMobileToggled: boolean = false;
  public appSidebarRightCollapsed: boolean = false;
  public appSidebarEndToggled: boolean = false;
  public appSidebarEndMobileToggled: boolean = false;
  
  public appContentClass: string = '';
  public appContentFullHeight: boolean = false;
  public appContentFullWidth: boolean = false;
}

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 { AppVariablesService } from '../../../service/app-variables.service';

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

export class PageBlank {
  appVariables = this.appVariablesService.getAppVariables();
  
  constructor(private appVariablesService: AppVariablesService) {
    // listen to the variables reload
    this.appVariablesService.variablesReload.subscribe(() => {
      this.appVariables = this.appVariablesService.getAppVariables();
      this.renderLineChart();
    });
  }
}

E) Dark Mode - top

Change the variable from template_angularjs17/src/app/service/app-settings.service.ts

...
public appDarkMode: boolean = false;     // LINE 9
...

F) Switch Design - top

Apple Design

  1. Change variable from template_angularjs17/src/scss/angular.scss.
    @import 'apple/styles';
  2. Add the following code to template_angularjs17/src/styles.css.
    @import 'https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css';
  3. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div class="menu-icon">
  <i class="ion-ios-pulse bg-gradient-blue"></i>
</div>

Facebook Design

  1. Change variable from template_angularjs17/src/scss/angular.scss.
    @import 'facebook/styles';
  2. Enable app header inverse from template_angularjs17/src/app/service/app-settings.service.ts.
    ...
appHeaderInverse: true,     // LINE 24
...

Transparent Design

  1. Change variable from template_angularjs17/src/scss/angular.scss.
    @import 'transparent/styles';
  2. Add the .app-cover next to the <body> tag in template_angularjs17/src/index.html.
    <body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  ...
</body>

Google Design

  1. Change variable from template_angularjs17/src/scss/angular.scss.
    @import 'google/styles';
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Enable app sidebar wide & light from template_angularjs17/src/app/service/app-settings.service.ts.
    ...
public appSidebarWide: boolean = false;   // LINE 29
public appSidebarLight: boolean = false;  // LINE 30
...
  4. Add the navbar desktop toggler to the .app-header in template_angularjs17/src/app/components/header/header.component.html.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler">
      ...
    </button>
    <a class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

  1. Change variable from template_angularjs17/src/scss/angular.scss.
    @import 'material/styles';
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Enable app sidebar wide from template_angularjs17/src/app/service/app-settings.service.ts.
    ...
public appSidebarWide: boolean = false;  // LINE 29
...
  4. Add the navbar desktop toggler to the .app-header in template_angularjs17/src/app/components/header/header.component.html.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler">
      ...
    </button>
    <a class="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>
  5. Add the floating navbar form to the .app-header in template_angularjs17/src/app/components/header/header.component.html AND REMOVE the default .navbar-form.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item">
      <a href="#" class="navbar-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div class="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="navbar-floating-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_angularjs17/src/index.html.
    <!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->

G) Using jQuery Plugins - top

Here is an example for how to use jQuery plugins in Angular 17 (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;
}

H) Using SCSS - top

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

@import 'default/styles';

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

I) 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": "5.3.3",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.1",
    "@angular/common": "^17.3.1",
    "@angular/compiler": "^17.3.1",
    "@angular/core": "^17.3.1",
    "@angular/forms": "^17.3.1",
    "@angular/language-service": "^17.3.1",
    "@angular/localize": "^17.3.1",
    "@angular/material": "^17.3.1",
    "@angular/platform-browser": "^17.3.1",
    "@angular/platform-browser-dynamic": "^17.3.1",
    "@angular/router": "^17.3.1",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@fullcalendar/angular": "^6.1.10",
    "@fullcalendar/bootstrap": "^6.1.11",
    "@fullcalendar/core": "^6.1.11",
    "@fullcalendar/daygrid": "^6.1.11",
    "@fullcalendar/interaction": "^6.1.11",
    "@fullcalendar/list": "^6.1.11",
    "@fullcalendar/resource-timegrid": "^6.1.11",
    "@fullcalendar/timegrid": "^6.1.11",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@ngx-loading-bar/core": "^6.0.2",
    "@swimlane/ngx-charts": "^20.5.0",
    "@swimlane/ngx-datatable": "^20.1.0",
    "@types/jasminewd2": "~2.0.13",
    "@types/node": "^20.11.30",
    "@yaireo/tagify": "^4.22.2",
    "angular-calendar": "^0.31.0",
    "apexcharts": "3.47",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.4.2",
    "codelyzer": "^6.0.2",
    "core-js": "^3.36.1",
    "dart-sass": "^1.25.0",
    "date-fns": "^3.6.0",
    "flag-icons": "^7.2.1",
    "ionicons": "^7.3.0",
    "jasmine-spec-reporter": "~7.0.0",
    "jsvectormap": "^1.5.3",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "ng-apexcharts": "^1.9.0",
    "ng-chartjs": "^0.2.8",
    "ng-masonry-layout": "^8.0.2",
    "ng2-charts": "^5.0.4",
    "ng2-nvd3": "^2.0.0",
    "ngx-color": "^9.0.0",
    "ngx-countdown": "^17.1.1",
    "ngx-daterangepicker-material": "^6.0.4",
    "ngx-editor": "^17.0.1",
    "ngx-highlightjs": "^10.0.0",
    "ngx-masonry": "^14.0.1",
    "ngx-nvd3": "^1.0.9",
    "ngx-scrollbar": "^14.0.0",
    "ngx-trend": "^8.0.0",
    "protractor": "~7.0.0",
    "rxjs": "^7.8.1",
    "simple-line-icons": "^2.5.5",
    "sweetalert2": "^11.10.7",
    "ts-node": "^10.9.2",
    "tslib": "^2.6.2",
    "tslint": "~6.1.3",
    "zone.js": "~0.14.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.3.2",
    "@angular/cli": "^17.3.2",
    "@angular/compiler-cli": "^17.3.1",
    "@types/jasmine": "~5.1.4",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.3"
  }
}