Getting Started

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

Download node

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

Open terminal and run npm install -g yarn

Angular CLI Doc:

Serve and build

Use terminal and navigate to project root.

Then run yarn

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.


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


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

  • .text-primary
  • .text-success
  • .text-warning
  • .text-danger
  • .text-light
  • .text-dark
  • .m-0
  • .m-0
  • .mt-1
  • .mr-1
  • .mb-1
  • .ml-1
  • .mb-05
  • .pt-1
  • .pr-1
  • .pb-1
  • .pl-1
  • .p-0
View all Classes


                    "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",
                        "ng2-validation": "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