Documentation
egret-banner

Overview

This project has been built with Angular CLI. A seed project also included. You can start new project using seed project.

Egret - Angular Material Design Admin Template

Egret is a material design admin template built with Angular and Angular CLI. Egret implements the official Angular Material Design components and it provides you everything you need to get started with your next CRM, CMS or dashboard based project.

Egret implements Lazy loading, AOT compilation, and Four color schemes/themes. And it’s also super easy to create your own theme. You will get detailed instructions about creating new theme in Egret documentation.

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-cli.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.ts (Location: src/app). And also each modules has it's own routing file defines it's child routes.

Layout

Egret's layout is controlled by LayoutService (Location: shared/services/layout.service.ts)

Open layout.service.ts file and find setAppLayout() method definition. Change the options in layoutConf as your need.


          setAppLayout() {
            //******** SET YOUR LAYOUT OPTIONS HERE *********
            this.layoutConf = {
              "navigationPos": "side",
              "sidebarStyle": "full",
              "dir": "ltr",
              "useBreadcrumb": true,
              "topbarFixed": false,
              "breadcrumb": "title"
            }
          }
            

Options

navigationPos: "side"(For side navigation) or "top"(For top navigation)

sidebarStyle: "full" or "compact" or "closed" (Default state of sidebar. Only works when navigationPos is "side")

dir: "ltr" or "rtl" (Document direction)

useBreadcrumb: true or false (Show/Hide breadcrumb)

breadcrumb: "simple"(Displays simple breadcrumb) or "title" (Displays breadcurmb with title)

topbarFixed: true or false (true makes topbar fixed, Only works when navigationPos is "side", because topbar for top navigation is always fixed)

Theming Guide

Set your default theme by assigning a new theme to activatedTheme in the constructor function of ThemeService (Location: src/app/shared/services/theme.service.ts).

Four custom themes are included.

  • egret-blue
  • egret-indigo
  • egret-dark-pink
  • egret-dark-purple

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

At the top bar there is a theme switcher. If you don’t want to use theme switcher, remove that from topbar.

Open _theme.scss (Location: src/assets/styles/scss/_themes.scss) and keep only one theme file if you don't need multiple themes.

Creating a new theme

First create color palettes for

  • primary
  • accent and
  • warn

Create palette here http://mcg.mbitson.com. Copy sass code for angular 2+, create file like src/assets/styles/scss/themes/_egret-blue.scss with the generated code. And include that file in src/assets/styles/scss/_themes.scss

For more about theming, visit these links

Cut off unnecessary weights

Open main.ts (Location: src) You will see few third pirty js files are imported. Remove what are not needed for your project.

Open shared.module.ts (Location: src/app/shared/shared.module.ts) you will see indications in comments wich file is required for which layout configuration. Remove what are not needed.

Now cut off few style files. Open app.scss, like before, you will see indications in comments wich file is required for which layout configuration

Note: If you are using seed project, you don't need to do these steps.

Translation

Egret uses TranslateService from package ng2-translate, this service in initialized in AdminLayoutComponent
(Location: src/app/shared/components/layouts/admin-layout).

"header-top" and "header-side" (Location: src/app/shared/components) components are using same service for changing current language.

Translation files are provided in /src/assets/i18n in JSON format. You should include your own translation in that directory.

File name should be your language code name. Get your language code name here

Authentication

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

canActivate should return true if user is authenticated otherwise return false. For demo purpose it’s returning true. You have to integrate your real authentication API to make that functional. In app.routes.ts file AdminLayoutComponent is guarded by canActivate

Common CSS Classes

Background color
  • .mat-bg-primary
  • .mat-bg-accent
  • .mat-bg-warn
Color
  • .mat-color-primary
  • .mat-color-accent
  • .mat-color-warn
Margins
  • .m-0
  • .mt-1
  • .mr-1
  • .mb-1
  • .ml-1
  • .mb-05
  • .margin-333
Paddings
  • .pt-1
  • .pr-1
  • .pb-1
  • .pl-1
  • .p-0
Font related
  • .fz-1
  • .fz-2
  • .text-center
  • .font-normal
  • .text-muted
  • .text-muted-white
  • .text-sm
Others
  • .bg-none
  • .bg-white
  • .height-100
  • .mat-box-shadow
  • .full-width

Do you like Egret?

Please give Egret a 5 star rating.

This will inspire me to add more features.

Buy Egret