Documentation

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, yarn and angular-cli installed on your computer.

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

Open terminal and run npm install -g yarn

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

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

Serve and build

Open terminal at Egret's root folder.

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.

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-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",    // side, top
              "sidebarStyle": "full",     // full, compact, closed
              "sidebarColor": "sidebar-black", //
              "sidebarCompactToggle": false, // applied when "sidebarStyle" is "compact"
              "dir": "ltr",               // ltr, rtl
              "useBreadcrumb": true,
              "topbarFixed": false,
              "topbarColor": "topbar-white", //
              "breadcrumb": "simple",       // simple, title
              "perfectScrollbar": false
            }
          }

Options

navigationPos: "side"(For side/verticle navigation) or "top"(For top/horizontal navigation)

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

sidebarColor: Background color for left sidebar (e.g. black). View colors

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)

topbarColor: Background color for Topbar (e.g. white). View colors

Available Colors

White
Black
gray
dark-gray
slate-gray
dark-purple
dark-blue
blue
indigo
yellow
green
red
orange
pink

NB: You can add new color variable in "src/assets/styles/scss/_colors.scss". Then you will be able to apply that color in layout options.

Navigation

Menu items are served by navigation.service.ts (Location: shared/services/navigation.service.ts). You have to define your menu items there. Both side and top navigation uses this service.

This service serves array of IMenuItem.


              interface IMenuItem {
                type: string,       // Possible values: link/dropDown/icon/separator/extLink
                name?: string,      // Used as display text for item and title for separator type
                state?: string,     // Router state
                icon?: string,      // Item icon name
                tooltip?: string,   // Tooltip text 
                disabled?: boolean, // If true, item will not be appeared in sidenav.
                sub?: IChildItem[]  // Dropdown items
              }
              interface IChildItem {
                name: string,       // Display text
                state: string       // Router state
              }

Breadcrumb

You need to define your breadcrumb text in routing files. Take a look in app.routing.ts.


              {
                path: 'dialogs', 
                loadChildren: './views/app-dialogs/app-dialogs.module#AppDialogsModule', 
                data: { title: 'Dialogs', breadcrumb: 'DIALOGS'}
              },

data property holds value for page tile and breadcrumb

Now take a look in child routing file, for example app-dialogs.routing.ts.


              export const DialogsRoutes: Routes = [
              {
                path: '',
                children: [{
                  path: 'confirm',
                  component: ConfirmDialogComponent,
                  data: { title: 'Confirm', breadcrumb: 'CONFIRM' },
                }, {
                  path: 'loader',
                  component: LoaderDialogComponent,
                  data: { title: 'Loader', breadcrumb: 'LOADER' },
                }]
              }
            ];

Please notice, data: { ... } is only present where path is not empty.

Accessing route parameter


          [
            {
              path: '',
              children: [{
                path: 'author/:username',
                component: AuthorComponent,
                data: { title: 'Author', breadcrumb: 'Author / {{username}}' },
              }, {
                path: 'book/:bookId',
                component: BookComponent,
                data: { title: 'Book', breadcrumb: 'Book / {{bookId}}' },
              }]
            }
          ];

We can show current route parameter in breadcrumb by putting parameter name in {{}} notation.

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

Two custom themes are included.

egret-navy
egret-navy-dark

Theme file: /src/assets/styles/scss/themes/_init.scss

Customizing theme

Update color palettes variables

$default-primary-palette
$default-accent-palette
$default-warn-palette

For more about theming, visit these links

Angular material theming doc.

Cut off unnecessary weights

Open polyfills.ts (Location: src) You will see few third pirty js files are imported at the of that file. Remove which 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 which 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