Documentation | NobleUI - Angular Admin Dashboard Template

Introduction

NobleUI Angular Admin is a responsive Angular 18+ admin template based on the Bootstrap 5 CSS framework and built with SASS. It is a no-jQuery dependency Angular admin template that includes all features and functionality with easy integration for your project. If you are unfamiliar with Bootstrap or SASS, visit their websites and read through the documentation. All Bootstrap components have been modified to fit the style of NobleUI, providing a consistent look throughout the template.

What's include

NobleUI - Angular admin comes with a simple and logically organized file structure for easy to understand and maintainability.

NobleUI-Angular/
├── template
            ├── demo1/                           ( Vertical Menu Layout )
                        ├── public/
                        ├── src/
                                    ├── app/
                                    ├── styles/
                                    ├── index.html
                                    ├── main.ts
                                    ├── styles.scss
                        ├── .editorconfig
                        ├── .gitignore
                        ├── .npmrc
                        ├── angular.json
                        ├── karma.conf.js
                        ├── package.json
                        ├── README.md
                        ├── rtl.config.js
                        ├── tsconfig.json
                        ├── tsconfig.app.json
                        ├── tsconfig.spec.json

            ├── demo2/                            ( Horizontal Menu Layout )
├── documentation

Set up the Development Environment

1. Install Node.js and npm if they are not already on your machine.

2. Angular CLI is a command line interface for the latest Angular. Install it before start with the Angular app.

npm install --global @angular/cli@latest

If you have Angular CLI installed previously, update it to the latest Angular CLI. Remove the older version and re-install it.

npm uninstall --global @angular/cli

npm install --global @angular/cli@latest

Template Installation

1. Go to [nobleui-angular]/template/[demo]/ folder.

Example:

cd nobleui-angular/template/demo1/

2. Then run npm install. This command install the dependencies in the local node_modules folder. By default, npm install will install all modules listed as dependencies in package.json.

npm install

3. Run the Angular using ng serve command.

ng serve

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files. Using the --open (or just -o) option will automatically open your browser on http://localhost:4200/.

Deployment

For the simplest deployment, create a production build and copy the output directory to a web server.

1. Start with the production build:

ng build

2. Copy everything within the output folder (dist/) to a folder on the server.

3. Configure the server to redirect requests for missing files to index.html.

If you copy the files into a server sub-folder, append the build flag, --base-href and set the <base href> appropriately. For example, if the index.html is on the server at /my/app/index.html, set the base href to <base href="/my/app/"> like this.

If you're serving the app out of a subfolder, edit a version of index.html to set the base href appropriately. For example, if the URL to index.html is www.mysite.com/my/app/index.html, set the base href to:

<base href="/my/app/">

Learn more about the role of <base href> in Angular documentation.

You also can set the base href right in the ng build command

ng build --base-href="/my/app/"

For more detailed information, visit this official Angular documentation website.

Right-to-Left (RTL)

The RTL does not enabled by default and also the RTL CSS files does not included. You can use the prepared webpack bundler to convert the existing SCSS files into RTL CSS files. You can find the rtl.config.js in each of the Angular demo folder.

Generate RTL CSS:

1. Go to [nobleui-angular]/template/[demo]/ folder.

Example:

cd nobleui-angular/template/demo1/

2. Run command to install Angular dependencies and extra webpack plugins for RTL generate.

npm install

3. Run npm script command to execute webpack with RTL.

npm run rtl

You can obtain the RTL CSS bundle at the following path: [nobleui-angular]/template/[demo]/src/styles/rtl-css/styles.rtl.css. To enable RTL, this RTL CSS needs to be included in your Angular project.

4. Open the Angular main styles file located at [nobleui-angular]/template/[demo]/src/styles.scss. Change the file path to the RTL CSS path:

From: @import "./styles/styles.scss";
To RTL CSS: @import "./styles/styles.rtl.css";

5. Open the Angular index.html file from [nobleui-angular]/template/[demo]/src/index.html. Set dir="rtl" on the html element.

<html lang="ar" dir="rtl">

6. Run the Angular as usual using ng serve command.

ng serve

Dark Sidebar and Header

The Dark sidebar (in demo1) & Dark header (in demo2) are does not enabled by default.

Open the Angular index.html file from [nobleui-angular]/template/[demo]/src/index.html. Add class to the body element as given below.

Demo1: To enable a dark sidebar, set class="sidebar-dark" on the body element.

<body class="sidebar-dark">

Demo2: To enable a dark header, set class="navbar-dark" on the body element.

<body class="navbar-dark">

Support

We are happy to help! Please feel free to contact us through this link if you have any queries.

If you liked our product, would you mind taking a few seconds to leave a review and ⭐️⭐️⭐️⭐️⭐️ rating ? It would mean a lot to us. You can submit your review on the ThemeForest download page .

NobleUI - Angular Admin Template v 3.0