Admin Template

Color Admin

“Angular 18 Version” Documentation by “Sean Ngu” v5.4.2

18.0

Updated on: 27/November/2024
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very much!

A) Installation - top

Follow the following step to install the angular 18 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_angularjs18
npm install
ng serve

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

Verify that you are running at least node 22.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 18 folder -->
/admin/template/template_angularjs18/src/assets/img

B) File Structure - top

File structure overview for Angular JS 18 Version

template_angularjs18/
├── 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_angularjs18/src/app/service/app-settings.service.ts

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

F) Switch Design - top

Apple Design

  1. Change variable from template_angularjs18/src/scss/angular.scss.
    @import 'apple/styles';
  2. Add the following code to template_angularjs18/src/index.html.
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
  3. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div class="menu-icon">
  <ion-icon name="pulse-outline" class="bg-gradient-blue"></ion-icon>
</div>

Facebook Design

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

Transparent Design

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

Google Design

  1. Change variable from template_angularjs18/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_angularjs18/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_angularjs18/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_angularjs18/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_angularjs18/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_angularjs18/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_angularjs18/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_angularjs18/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 18 (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 18 now is fully configured with scss file settings. You may include / switch the Color Admin theme by changing the file /template_angular18/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.4.2",
  "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": "^18.2.12",
    "@angular/cdk": "^18.2.14",
    "@angular/common": "^18.2.12",
    "@angular/compiler": "^18.2.12",
    "@angular/core": "^18.2.12",
    "@angular/forms": "^18.2.12",
    "@angular/language-service": "^18.2.12",
    "@angular/localize": "^18.2.12",
    "@angular/material": "^18.2.12",
    "@angular/platform-browser": "^18.2.12",
    "@angular/platform-browser-dynamic": "^18.2.12",
    "@angular/router": "^18.2.12",
    "@fortawesome/fontawesome-free": "^6.7.1",
    "@fullcalendar/angular": "^6.1.15",
    "@fullcalendar/bootstrap": "^6.1.15",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/list": "^6.1.15",
    "@fullcalendar/resource-timegrid": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@ng-bootstrap/ng-bootstrap": "^17.0.1",
    "@ngx-loading-bar/core": "^7.0.0",
    "@swimlane/ngx-charts": "^21.0.0",
    "@swimlane/ngx-datatable": "^20.1.0",
    "@types/jasminewd2": "~2.0.13",
    "@types/node": "^22.9.1",
    "@yaireo/tagify": "^4.32.0",
    "angular-calendar": "^0.31.1",
    "apexcharts": "3.53",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.4.6",
    "codelyzer": "^6.0.2",
    "core-js": "^3.39.0",
    "date-fns": "^4.1.0",
    "flag-icons": "^7.2.3",
    "ionicons": "^7.4.0",
    "jasmine-spec-reporter": "~7.0.0",
    "jsvectormap": "^1.6.0",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "ng-apexcharts": "1.12.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": "^18.0.0",
    "ngx-daterangepicker-material": "^6.0.4",
    "ngx-editor": "^18.0.0",
    "ngx-highlightjs": "^12.0.0",
    "ngx-masonry": "^14.0.1",
    "ngx-nvd3": "^1.0.9",
    "ngx-scrollbar": "^16.1.0",
    "ngx-trend": "^8.0.0",
    "protractor": "~7.0.0",
    "rxjs": "^7.8.1",
    "rxjs-compat": "^6.6.7",
    "sass": "1.77.8",
    "simple-line-icons": "^2.5.5",
    "sweetalert2": "^11.14.5",
    "ts-node": "^10.9.2",
    "tslib": "^2.8.1",
    "tslint": "~6.1.3",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~18.2.12",
    "@angular/cli": "^18.2.12",
    "@angular/compiler-cli": "^18.2.12",
    "@types/jasmine": "~5.1.4",
    "jasmine-core": "~5.4.0",
    "karma": "~6.4.4",
    "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.5.4"
  }
}