Egret Angular


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

Open terminal and run npm install -g yarn

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

Angular CLI Doc:

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.


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.


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


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.

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

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.


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 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
  • .mat-color-primary
  • .mat-color-accent
  • .mat-color-warn
  • .m-0
  • .mt-1
  • .mr-1
  • .mb-1
  • .ml-1
  • .mb-05
  • .margin-333
  • .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
  • .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