v6.0Bootstrap 5 responsive admin template
documented by Sean Ngu
Last Updated on: 12/July/2025
By: Sean Ngu
Thank you for purchasing my theme. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
Follow the following step to install the angular 20 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 --legacy-peer-deps 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 Studio - Angular 20
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 Studio 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-minified': appSettings.appSidebarMinified,
'app-sidebar-mobile-toggled': appSettings.appSidebarMobileToggled,
'app-content-full-height': appSettings.appContentFullHeight,
'app-content-full-width': appSettings.appContentFullWidth,
'app-footer-fixed': appSettings.appFooter
}">
<header *ngIf="!appSettings.appHeaderNone"></header>
<top-nav *ngIf="appSettings.appTopNav"></top-nav>
<sidebar *ngIf="!appSettings.appSidebarNone"></sidebar>
<div id="content" class="app-content" [class]="appSettings.appContentClass">
<router-outlet></router-outlet>
</div>
<footer *ngIf="appSettings.appFooter"></footer>
<theme-panel
(appDarkModeChanged)="onAppDarkModeChanged($event)"
(appThemeChanged)="onAppThemeChanged($event)"
*ngIf="!appSettings.appThemePanelNone"
></theme-panel>
</div>
<!-- END #app -->
AngularStudio 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 [
{ 'text': 'Navigation', 'is_header': true },
{ 'path': '/', 'icon': 'fa fa-home', 'text': 'Home' },
{ 'path': '/level', 'icon': 'fa fa-align-left', 'text': 'Level 1', 'children': [
{ 'path': '/level/1.1', 'text': 'Level 1.1'},
{ 'path': '/level/1.3', 'text': 'Level 1.3'}]
}
];
}
}
AngularStudio 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.appThemePanelNone = true;
this.appSettings.appSidebarNone = true;
this.appSettings.appSidebarMinified = 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.appTopNav = false;
this.appSettings.appThemePanelNone = false;
this.appSettings.appSidebarNone = false;
this.appSettings.appSidebarMinified = false;
this.appSettings.appContentClass = '';
this.appSettings.appContentFullHeight = false;
this.appSettings.appContentFullWidth = false;
}
}
AngularStudio 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>
...
<card-expand-toggler>...</card-expand-toggler>
</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;
If you wish to enable the dark mode from app settings file, you may navigate to the file /src/app/service/app-settings.service.ts and change the appDarkMode variable value to true.
export class AppSettings {
public appDarkMode: boolean = true;
}
OR
Besides that you can also enable the dark mode by adding an attribute data-bs-theme="dark" for /src/index.html.
This will enable the dark mode theme.
<!DOCTYPE html> <html lang="en"> </html>to
<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> </html>
OR
If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.
<card data-bs-theme="dark">
<card-body>
<!-- your component content here -->
</card-body>
</card>
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.
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/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /src/_variables.scss
Dark Mode Variables
The /src/scss/_variables-dark.scss file contains the variables that control the styles for dark mode.
These variables are used in conjunction with the variables in the /src/_variables.scss file to provide different values for light and dark modes.
<!-- dark mode variable --> /src/_variables-dark.scss
I've used the following images, icons or other files as listed.
Platform
jQuery Plugins
Photos
Icons