NobleUI - Angular Admin Template v 2.1.0

Thank you so much for purchasing NobleUI - Angular Admin Template. If you have any questions that are beyond the scope of this documentation, please feel free to contact us.

Introduction

NobleUI Angular Admin is a responsive Angular 14+ admin template that is based on the CSS framework Bootstrap 5 and it is built with SASS. SASS compiler makes it easier to code and customize. It's No jQuery Dependency angular admin template including all feature and functionality with ease of integration for your project. If you are unfamiliar with Bootstrap or SASS, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of NobleUI and provide a consistent look throughout the template.

What's include

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

NobleUI-Angular/
├── template
            ├── demo1/                           ( Vertical Menu - Light )
                        ├── src/
                                    ├── app/
                                    ├── assets/
                                    ├── environments/
                                    ├── .htaccess
                                    ├── favicon.ico
                                    ├── index.html
                                    ├── main.ts
                                    ├── polyfills.ts
                                    ├── styles.scss
                                    ├── test.ts
                        ├── .browserlist
                        ├── .editorconfig
                        ├── .gitignore
                        ├── angular.json
                        ├── karma.conf.js
                        ├── package.json
                        ├── README.md
                        ├── tsconfig.json
                        ├── tsconfig.app.json
                        ├── tsconfig.spec.json
                        ├── webpack-rtl.config.js

            ├── demo2/                            ( Vertical Menu - Dark )
            ├── demo3/                            ( Horizontal Menu - Light )
            ├── demo4/                            ( Horizontal Menu - Dark )
├── 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> below.

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 webpack.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

4. You will be able to get the bundle CSS with RTL by path: [nobleui-angular]/template/[demo]/src/assets/scss/style.rtl.css. For RTL to be enabled, this RTL CSS need to be included in the Angular.

5. Open the Angular main style file from [nobleui-angular]/template/[demo]/src/styles.scss. Change the file path to RTL CSS path:

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

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

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

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

ng serve

Dark Sidebar/Header

The Dark sidebar (demo1) & Dark header (demo3) 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.

For the Vertical menu - dark sidebar, set class="sidebar-dark" on the body element.

<body class="sidebar-dark">

For the Horizontal menu - dark header, set class="navbar-dark" on the body element.

<body class="navbar-dark">

Support

We are happy to help you. Please feel free to contact us through: https://themeforest.net/item/nobleui-angular-10-admin-template/28512297/support if you have any queries.

If you liked our product, would you mind taking a few seconds to write a review and ⭐️⭐️⭐️⭐️⭐️ rating for us, please? It means a lot to us. You can review the product from the https://themeforest.net/downloads page.