### Getting Started

Make sure you have `Nodejs`, `NPM` and `@angular/cli` installed on your computer.

Download node https://nodejs.org/en/download

Open terminal and run `npm install -g @angular/cli`

Angular CLI Doc: https://cli.angular.io

##### Serve and build

Use terminal and navigate to project root.

Then run `npm install`

##### Development server

Run `ng serve` for a dev server. Navigate to http://localhost:4200. The app will automatically reload if you change any of the source files.

##### Code Scaffolding

Run `ng generate component componentName` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.

##### Build

Run `ng build` to build the project. The build artifacts will be stored in the dist/ directory. Use the `-prod` flag for a production build.

##### App Entry Point

`main.ts` (Location: src) is the entry file. And `app.scss` (Location: "src/assets/styles/app.scss") is the entry file for Styles which is included in `angular.json` file.

### Route Configuration

There are two main `router-outlet`s in `AuthLayoutComponent` and `AdminLayoutComponent` (Location: src/app/shared/components/layouts). `AuthLayoutComponent` renders sessions view (Location: src/app/views/sessions) and `AdminLayoutComponent` renders all views except sessions view.

Each directory in `src/app/views` is a module. And those modules are lazy loaded which is configured in `app-routing.module.ts` (Location: src/app). And also each modules has it's own routing file defines it's child routes.

### Folder Structure

### Theming Guide

Two custom themes are included.

- lite-purple
- lite-blue

These files are located in `src/assets/styles/themes`

Open `_custom.scss` (Location: src/assets/styles/themes/lite-purple/_custom.scss) and and change the color variables

##### Color variables

- primary
- secondary
- success
- warning
- info
- danger
- light
- dark

### Sidebar compact Colors

Open `shared/components/layouts/admin-layout-sidebar-compact/admin-layout-sidebar-compact.component.html` Update the class name of `app-admin-wrap`.

Available colors

- sidebar-blue
- sidebar-midnight-blue
- sidebar-indigo
- sidebar-dark-purple
- sidebar-purple
- sidebar-pink
- sidebar-red
- sidebar-gray
- sidebar-slate-gray
- sidebar-gradient-purple-indigo
- sidebar-gradient-black-blue
- sidebar-gradient-black-gray
- sidebar-gradient-steel-gray

For more about theming, visit following link

- Creating new bootstrap theme.

### Authentication

Authentication service is added in service directory. This class implements `canActivate`.

`canActivate` should return `true` if user is authenticated otherwise return `false`. You have to integrate your real authentication API to make that full functional. In `app-routing.module.ts` file, `AdminLayout` is guarded by `canActivate`

### Common CSS Classes

##### Background color

- .bg-primary
- .bg-success
- .bg-warning
- .bg-danger
- .bg-light
- .bg-dark

##### Color

- .text-primary
- .text-success
- .text-warning
- .text-danger
- .text-light
- .text-dark

##### Margins

- .m-0
- .m-0
- .mt-1
- .mr-1
- .mb-1
- .ml-1
- .mb-05

##### Paddings

- .pt-1
- .pr-1
- .pb-1
- .pl-1
- .p-0

View all Classes

### Dependencies

                        "dependencies": {
                            "@angular/animations": "7.0.3",
                            "@angular/common": "7.0.3",
                            "@angular/compiler": "7.0.3",
                            "@angular/core": "7.0.3",
                            "@angular/forms": "7.0.3",
                            "@angular/http": "7.0.3",
                            "@angular/platform-browser": "7.0.3",
                            "@angular/platform-browser-dynamic": "7.0.3",
                            "@angular/router": "7.0.3",
                            "@ng-bootstrap/ng-bootstrap": "4.0.0",
                            "@swimlane/ngx-datatable": "13.1.0",
                            "angular-calendar": "0.26.4",
                            "angular-in-memory-web-api": "0.6.1",
                            "angular2-ladda": "^2.0.0",
                            "angular2-text-mask": "^9.0.0",
                            "bootstrap": "4.1.3",
                            "classlist.js": "1.1.20150312",
                            "core-js": "2.5.4",
                            "date-fns": "1.29.0",
                            "echarts": "4.2.0-rc.1",
                            "highlight.js": "9.13.1",
                            "ngx-custom-validators": "4.2.0",
                            "ngx-chips": "1.9.8",
                            "ngx-color-picker": "7.0.1",
                            "ngx-echarts": "4.0.0",
                            "ngx-img-cropper": "0.10.4",
                            "ngx-pagination": "3.2.1",
                            "ngx-perfect-scrollbar": "6.3.1",
                            "ngx-quill": "4.0.0",
                            "ngx-toastr": "9.1.0",
                            "popper.js": "1.14.4",
                            "quill": "1.3.6",
                            "rxjs": "~6.2.0",
                            "web-animations-js": "2.3.1",
                            "zone.js": "~0.8.26"
                          }

Do you like Gull?

##### Don't forget to give a 5 star rating.

This will inspire us to add more features.

Buy Gull