v3.0Bootstrap 5 responsive admin template
documented by Sean Ngu
Updated on: 10/April/2025
By: Sean Ngu
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!
Follow the following step to install the angular 19 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_angular 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.
Besides that, make sure the @angular/cli has been installed in your localhost
File structure overview for Quantum - Angular 19
template_angular/
├── angular.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
├── tslint.json
├── e2e/
└── src/
├── app/ // app module, routing, pages, components
├── assets/ // json data, images
├── environments/ // build settings
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── scss/ // core styling for Quantum in scss
├── styles.css // include font icons and custom css here
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── typings.d.ts
Below is the general app structure for app component /src/app/app.component.html. It include the app header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.
<!-- BEGIN #app -->
<div id="app" class="app" [ngClass]="{
'd-none': !appLoaded,
'app-without-header': appSettings.appHeaderNone,
'app-without-sidebar': appSettings.appSidebarNone,
'app-with-top-nav': appSettings.appTopNav,
'app-boxed-layout': appSettings.appBoxedLayout,
'app-sidebar-collapsed': appSettings.appSidebarCollapsed,
'app-content-full-height': appSettings.appContentFullHeight,
'app-content-full-width': appSettings.appContentFullWidth,
'app-footer-fixed': appSettings.appFooter,
'app-has-scroll': appSettings.appHasScroll
}">
<header *ngIf="!appSettings.appHeaderNone"></header>
<top-nav *ngIf="appSettings.appTopNav"></top-nav>
<sidebar *ngIf="!appSettings.appSidebarNone"></sidebar>
<sidebar-mobile-backdrop *ngIf="!appSettings.appSidebarNone"></sidebar-mobile-backdrop>
<div id="content" class="app-content" [class]="appSettings.appContentClass">
<router-outlet></router-outlet>
</div>
<footer *ngIf="appSettings.appFooter"></footer>
<theme-panel></theme-panel>
</div>
<!-- END #app -->
Quantum Angular using service to create / store the app sidebar menu. You can view the file from /src/app/service/app-menu.service.ts.
Below is the example for one / two level sidebar menu.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AppMenuService {
getAppMenus() {
return [
{ 'path': '/', 'icon': 'ph:rocket-duotone', 'text': 'DASHBOARD' },
{ 'icon': 'ph:envelope-duotone', 'text': 'EMAIL', 'children': [
{ 'path': '/email/inbox', 'action': 'Inbox', 'text': 'INBOX' },
{ 'path': '/email/compose', 'action': 'Compose', 'text': 'COMPOSE' },
{ 'path': '/email/detail', 'action': 'Detail', 'text': 'DETAIL' }
]
},
];
}
}
Quantum Angular using service to create / store the app options and share within different pages. You can use the app option to create different
layout like (full width page, without header, without sidebar and etc). You can view the file from /src/app/service/app-options.service.ts.
Below is the list of app options available and example for how to use the app option within the different pages.
import { Component } from '@angular/core';
import { AppSettings } from '../../../service/app-settings.service';
@Component({
selector: 'custom-page',
templateUrl: './custom.html'
})
export class CustomPage {
constructor(private appSettings: AppSettings) {
this.appSettings.appBoxedLayout = true;
this.appSettings.appHeaderNone = true;
this.appSettings.appFooter = true;
this.appSettings.appTopNav = true;
this.appSettings.appSidebarNone = true;
this.appSettings.appSidebarCollapsed = true;
this.appSettings.appContentClass = 'p-0';
this.appSettings.appContentFullHeight = true;
this.appSettings.appContentFullWidth = true;
}
// reset to default before the page leave
ngOnDestroy() {
this.appSettings.appBoxedLayout = false;
this.appSettings.appHeaderNone = false;
this.appSettings.appFooter = false;
this.appSettings.appSidebarNone = false;
this.appSettings.appSidebarCollapsed = false;
this.appSettings.appContentClass = '';
this.appSettings.appContentFullHeight = false;
this.appSettings.appContentFullWidth = false;
}
}
Quantum Angular using service to create / store the app variables like font / color from css and share within different pages. You can use the app variables to implement it
into the plugins like (chart js / apexchart) while theme change. Below is the example for how to use the app variables within the pages.
You can view the file from /src/app/service/app-variables.service.ts for the full list of variables.
import { Component } from '@angular/core';
import { AppVariablesService } from '../../../service/app-variables.service';
@Component({
selector: 'custom-page',
templateUrl: './custom-page.html'
})
export class CustomPage {
appVariables = this.appVariablesService.getAppVariables();
public lineChartOptions: any = { };
constructor(private appVariablesService: AppVariablesService) {
// listen to the variables reload
this.appVariablesService.variablesReload.subscribe(() => {
this.appVariables = this.appVariablesService.getAppVariables();
this.renderLineChart();
});
}
renderLineChart() {
this.lineChartOptions = {
color: this.appVariables.color.themeColor
};
}
ngOnInit() {
this.renderLineChart();
}
}
List of components inside the /src/app/components folder
/src/app/components/ ├── card/ ├── footer/ ├── header/ ├── nav-scroll/ ├── sidebar/ ├── sidebar-mobile-backdrop/ ├── top-nav/ └── theme-panel/
Below is the global <card> component tags available within the app.
<card-group>
<card>
<card-header class="with-btn">
...
<card-header-btn>...</card-header-btn>
</card-header>
<card-body>
...
<card-img-overlay>
...
</card-img-overlay>
</card-body>
<card-footer>
..
</card-footer>
</card>
</card-group>
You may change the variable /src/app/service/app-settings.service.ts in order to change the app theme color.
public appTheme: string = 'theme-red'; /* available theme color */ theme-pink theme-orange theme-yellow theme-lime theme-green theme-teal theme-cyan theme-blue theme-purple theme-indigo theme-black theme-gray-100 theme-gray-200 theme-gray-300 theme-gray-400 theme-gray-500 theme-gray-600 theme-gray-700 theme-gray-800 theme-gray-900
OR
Add the theme to the <body> tag in /src/index.html in order to change the theme color.
<body class="theme-indigo">...</body>
OR
Edit the theme color variables from scss /src/scss/_variables.scss
<!-- LINE 100--> $theme: $indigo !default;
To enable RTL mode, follow these steps:
/src/_variables.scss file in your code editor.$enable-rtl variable and change its value to true:
$enable-rtl: true;This will enable RTL mode for your application.
Global Variables
The /src/_variables.scss file contains the variables that control the styles of your application.
To edit these variables, navigate to the /src/_variables.scss file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /src/_variables.scss
I've used the following images, icons or other files as listed.
Platform
jQuery Plugins
Photos
Icons