Documentation

Color Admin

“Angular 22 Version” Documentation by “Sean Ngu” v6.0.0

22.0

Updated on: 25/August/2026
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 steps to install Angular 22 in your local development environment.
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_angularjs22
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 11.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 22 folder -->
/admin/template/template_angularjs22/src/assets/img

B) File Structure - top

File structure overview for Angular 22 Version

template_angularjs22/
├── 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
  }" [class]="appSettings.appClass">

  <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 appClass: string = '';
  
  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_angularjs22/src/app/service/app-settings.service.ts

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

F) RTL Mode - top

Add the dir="rtl" attribute to <html> for /src/index.html in order to enable Right-To-Left (RTL) layout direction.

<html dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

G) Switch Design - top

Replace the existing @import 'default/styles'; line in template_angularjs22/src/scss/angular.scss with the selected theme import below, then restart the Angular development server or rebuild the project.

Apple Design

  1. Change variable from template_angularjs22/src/scss/angular.scss.
    @import 'apple/styles';
  2. No additional icon script is required for the current Iconify-based components.
    <!-- No additional icon script is required. -->
  3. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:pulse-bold-duotone"></iconify-icon>
</div>

Facebook Design

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

Transparent Design

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

Google Design

  1. Change variable from template_angularjs22/src/scss/angular.scss.
    @import 'google/styles';
  2. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
</div>
  3. Enable app sidebar wide & light from template_angularjs22/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_angularjs22/src/app/components/header/header.component.html.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN brand -->
  <div class="brand">
    <button type="button" class="menu-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="menu-toggler">
      ...
    </button>
    <a class="brand-logo">
      Color Admin
    </a>
  </div>
  <!-- END brand -->
  ...
</div>

Material Design

  1. Change variable from template_angularjs22/src/scss/angular.scss.
    @import 'material/styles';
  2. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
</div>
  3. Enable app sidebar wide from template_angularjs22/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_angularjs22/src/app/components/header/header.component.html.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN brand -->
  <div class="brand">
    <button type="button" class="menu-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="menu-toggler">
      ...
    </button>
    <a class="brand-logo">
      Color Admin Material
    </a>
  </div>
  <!-- END brand -->
  ...
</div>
  5. Customize the existing header search form in template_angularjs22/src/app/components/header/header.component.html. Do not add a second search form.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="menu">
    <div class="menu-item">
      <a href="#" class="menu-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- EXISTING SEARCH FORM -->
      <div class="menu-item menu-item-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="menu-item-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_angularjs22/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 -->

H) Using jQuery Plugins - top

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

NPM INSTALLATION:
npm install @types/jquery --save
npm install datatables.net datatables.net-bs5 datatables.net-responsive datatables.net-responsive-bs5-bs
INCLUDE CSS: /src/styles.css
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-responsive-bs5/css/responsive.bootstrap5.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;
}

I) Using SCSS - top

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

@import 'default/styles';

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

J) 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": "6.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^22.1.0",
    "@angular/cdk": "^22.1.1",
    "@angular/common": "^22.1.0",
    "@angular/compiler": "^22.1.0",
    "@angular/core": "^22.1.0",
    "@angular/forms": "^22.1.0",
    "@angular/language-service": "^22.1.0",
    "@angular/localize": "^22.1.0",
    "@angular/material": "^22.1.1",
    "@angular/platform-browser": "^22.1.0",
    "@angular/platform-browser-dynamic": "^22.1.0",
    "@angular/router": "^22.1.0",
    "@fortawesome/fontawesome-free": "^7.3.1",
    "@fullcalendar/angular": "^6.1.21",
    "@fullcalendar/bootstrap": "^6.1.21",
    "@fullcalendar/core": "^6.1.21",
    "@fullcalendar/daygrid": "^6.1.21",
    "@fullcalendar/interaction": "^6.1.21",
    "@fullcalendar/list": "^6.1.21",
    "@fullcalendar/resource-timegrid": "^6.1.21",
    "@fullcalendar/timegrid": "^6.1.21",
    "@ng-bootstrap/ng-bootstrap": "^21.0.0",
    "@ngx-loading-bar/core": "^7.0.0",
    "@popperjs/core": "^2.11.8",
    "@swimlane/ngx-charts": "^22.0.0",
    "@swimlane/ngx-datatable": "^21.1.0",
    "@types/jasminewd2": "~2.0.13",
    "@types/node": "^24.0.10",
    "@yaireo/tagify": "^4.35.1",
    "angular-calendar": "^0.31.1",
    "apexcharts": "^5.16.0",
    "bootstrap": "^5.3.8",
    "bootstrap-icons": "^1.13.1",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.5.0",
    "codelyzer": "^6.0.2",
    "core-js": "^3.43.0",
    "date-fns": "^4.1.0",
    "flag-icons": "^7.5.0",
    "ionicons": "^8.0.10",
    "jasmine-spec-reporter": "~7.0.0",
    "jsvectormap": "^1.7.0",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "ng-apexcharts": "1.16.0",
    "ng-chartjs": "^0.2.8",
    "ng-masonry-layout": "^8.0.2",
    "ng2-charts": "^5.0.4",
    "ng2-nvd3": "^2.0.0",
    "ngx-color": "^10.0.0",
    "ngx-countdown": "^20.0.0",
    "ngx-daterangepicker-material": "^6.0.4",
    "ngx-editor": "^18.0.0",
    "ngx-highlightjs": "^14.0.1",
    "ngx-masonry": "^14.0.1",
    "ngx-nvd3": "^1.0.9",
    "ngx-scrollbar": "^18.0.0",
    "ngx-trend": "^8.0.0",
    "protractor": "~7.0.0",
    "rxjs": "7.4.0",
    "rxjs-compat": "^6.6.7",
    "simple-line-icons": "^2.5.5",
    "sweetalert2": "^11.22.2",
    "ts-node": "^10.9.2",
    "tslib": "^2.8.1",
    "tslint": "~6.1.3",
    "zone.js": "~0.16.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~22.1.3",
    "@angular/cli": "^22.1.1",
    "@angular/compiler-cli": "^22.1.0",
    "@types/jasmine": "~5.1.8",
    "jasmine-core": "~5.8.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",
    "sass": "1.77.7",
    "sass-loader": "^13.3.3",
    "typescript": "~6.0.3"
  }
}
undefined undefined