## Documentation

### Introduction

Azia Angular Admin is a responsive Angular 8 template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. 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 Azia Angular Admin and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

### File Structure

Once you have download the package you will see the following folder structure inside the folder.

Azia/ ├── template ├── demo variation folders (for eg, demo_1) ├── e2e/ ├── src/ ├── app/ ├── assets/ ├── environments/ ├── browserlist ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.scss ├── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── .editorconfig/ ├── .gitignore ├── angular.json ├── CHANGELOG.md ├── package.json ├── README.md ├── .tsconfig.md ├── .tslint.json ├── preview (dist) ├── CHANGELOG.md ├── documentation

### Installation

#### Set up the Development Environment

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

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

Go to the project directory and install the Angular local project dependencies.

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

For more detailed information to install the Angular application, visit this official Angular documentation website.

### Deployment

#### Deploy Angular app

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 --prod

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 --prod --base-href="/my/app/"

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

### Basic Structure

#### App Component

<div class="az-body az-body-sidebar"> <app-sidebar *ngIf="showHeader"></app-sidebar> <div class="az-content az-content-dashboard-two"> <app-header *ngIf="showHeader"></app-header> <div class="az-content-wrapper"> <router-outlet></router-outlet> </div> <app-footer *ngIf="showFooter"></app-footer> </div> </div>

#### Header

<div class="az-header"> <div class="container"> <div class="az-header-left"> <a routerLink="/" class="az-logo"><span></span> azia</a> <a href="#" id="azMenuShow" (click)="toggleHeaderMenu($event)" class="az-header-menu-icon d-lg-none"><span></span></a> </div><!-- az-header-left --> <div class="az-header-menu"> <div class="az-header-menu-header"> <a routerLink="/" class="az-logo"><span></span> azia</a> <a href="#" (click)="toggleHeaderMenu($event)" class="close">×</a> </div><!-- az-header-menu-header --> <ul class="nav"> <li class="nav-item" ngbDropdown [ngClass]="{ 'active': dashboard.isActive }"> <a routerLink="/dashboard" routerLinkActive="active" #dashboard="routerLinkActive" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a> </li> <li class="nav-item" ngbDropdown> <a class="nav-link with-sub" id="pagesDropdown" ngbDropdownToggle><i class="typcn typcn-document"></i> Pages</a> <nav class="az-menu-sub" ngbDropdownMenu aria-labelledby="pagesDropdown"> <a routerLink="/general-pages/signin" class="nav-link">Sign In</a> <a routerLink="/general-pages/signup" class="nav-link">Sign Up</a> </nav> </li> <li class="nav-item dropdown-mega" ngbDropdown [ngClass]="{'active': buttons.isActive || dropdown.isActive || icons.isActive }"> <a class="nav-link with-sub" id="componentsDropdown" ngbDropdownToggle><i class="typcn typcn-book"></i> Components</a> <div class="az-menu-sub az-menu-sub-mega" ngbDropdownMenu aria-labelledby="componentsDropdown"> <div class="container"> <div> <nav class="nav"> <span>UI Elements</span> <a routerLink="/ui-elements/buttons" routerLinkActive="active" #buttons="routerLinkActive" class="nav-link">Buttons</a> <a routerLink="/ui-elements/dropdown" routerLinkActive="active" #dropdown="routerLinkActive" class="nav-link">Dropdown</a> <a routerLink="/ui-elements/icons" routerLinkActive="active" #icons="routerLinkActive" class="nav-link">Icons</a> </nav> </div> <div> <nav class="nav"> <span>Forms</span> <a routerLink="/form/form-elements" routerLinkActive="active" #formElements="routerLinkActive" class="nav-link">Form Elements</a> </nav> </div> <div> <nav class="nav"> <span>Charts</span> <a routerLink="/charts/chartjs" routerLinkActive="active" #chartjs="routerLinkActive" class="nav-link">ChartJS</a> </nav> </div> <div> <nav class="nav"> <span>Tables</span> <a routerLink="/tables/basic-tables" routerLinkActive="active" #basicTables="routerLinkActive" class="nav-link">Basic Tables</a> </nav> </div> </div><!-- container --> </div> </li> </ul> </div><!-- az-header-menu --> <div class="az-header-right"> <a routerLink="/" class="az-header-search-link"><i class="fas fa-search"></i></a> <div class="az-header-message"> <a routerLink="/"><i class="typcn typcn-messages"></i></a> </div><!-- az-header-message --> <div class="dropdown az-header-notification" ngbDropdown> <a class="new" id="notificationsDropdown" ngbDropdownToggle><i class="typcn typcn-bell"></i></a> <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="notificationsDropdown"> <div class="az-dropdown-header mg-b-20 d-sm-none"> <a class="az-header-arrow" (click)="closeMenu($event)"><i class="icon ion-md-arrow-back"></i></a> </div> <h6 class="az-notification-title">Notifications</h6> <p class="az-notification-text">You have 2 unread notification</p> <div class="az-notification-list"> <div class="media new"> <div class="az-img-user"><img src="assets/images/img2.jpg" alt=""></div> <div class="media-body"> <p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p> <span>Mar 15 12:32pm</span> </div><!-- media-body --> </div><!-- media --> <div class="media new"> <div class="az-img-user online"><img src="assets/images/img3.jpg" alt=""></div> <div class="media-body"> <p><strong>Joyce Chua</strong> just created a new blog post</p> <span>Mar 13 04:16am</span> </div><!-- media-body --> </div><!-- media --> <div class="media"> <div class="az-img-user"><img src="assets/images/img4.jpg" alt=""></div> <div class="media-body"> <p><strong>Althea Cabardo</strong> just created a new blog post</p> <span>Mar 13 02:56am</span> </div><!-- media-body --> </div><!-- media --> <div class="media"> <div class="az-img-user"><img src="assets/images/img5.jpg" alt=""></div> <div class="media-body"> <p><strong>Adrian Monino</strong> added new comment on your photo</p> <span>Mar 12 10:40pm</span> </div><!-- media-body --> </div><!-- media --> </div><!-- az-notification-list --> <div class="dropdown-footer"><a href="">View All Notifications</a></div> </div><!-- dropdown-menu --> </div><!-- az-header-notification --> <div class="dropdown az-profile-menu" ngbDropdown> <a class="az-img-user" id="profileDropdown" ngbDropdownToggle><img src="assets/images/img1.jpg" alt="user"></a> <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="profileDropdown"> <div class="az-dropdown-header d-sm-none"> <a class="az-header-arrow" (click)="closeMenu($event)"><i class="icon ion-md-arrow-back"></i></a> </div> <div class="az-header-profile"> <div class="az-img-user"> <img src="assets/images/img1.jpg" alt=""> </div><!-- az-img-user --> <h6>Aziana Pechon</h6> <span>Premium Member</span> </div><!-- az-header-profile --> <a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a> <a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a> <a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a> <a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a> <a routerLink="/general-pages/signin" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a> </div><!-- dropdown-menu --> </div> </div><!-- az-header-right --> </div><!-- container --> </div><!-- az-header -->

#### Footer

<div class="az-footer ht-40"> <div class="container ht-100p pd-t-0-f"> <span>© 2019 Azia Responsive Bootstrap 4 Dashboard Template</span> </div><!-- container --> </div><!-- az-footer -->

### Customer Support

If you face any issues while using Azia Angular Admin Template, please feel free to contact us via BootstrapDash support desk.

We will respond to you as quickly as we can.