Documentation
Overview Getting started CSS Helpers 3rd Party

Overview

This documentation is to help you understand the template's structure. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML, CSS and JS knowledge is required to customize this template.

If you have any questions that are beyond the scope of this help file, please feel free to get in touch.

Support requests can go through the form on my ThemeForest profile page or via email.

Support for my items includes:

Item support does not include:

Before seeking support please:

What is it?

Primer is a creative material design admin template built for Angular 2+ and Angular 4. It comes out of the box with AoT and lazy loading support, Language translation , RTL support and light and dark colour schemes. With this, you get all you need to start working on your SAAS, CRM, CMS or dashboard based project.

Once you've purchased Primer please consider giving a 5 star rating, it helps in pushing out more updates and adding a lot more features.

Getting started

This template is built with angular-cli and requires Node and NPM to be installed.

Installing the prerequisites

Node.js and NPM: You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js

angular-cli: You can install angular-cli by executing from your terminal npm install -g @angular/cli. More details can be found here https://github.com/angular/angular-cli

Installing the npm packages

Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

Using CLI
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 component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.

Building

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. Use `--aot` flag for a AoT build

Further help

To get more help on the `angular-cli` use `ng --help` or go check out https://github.com/angular/angular-cli.

Layout Engine

For the layout, the template uses @angular/flex-layout angular 2+ component layout engine which uses flexbox css. For detailed usage information you can read the docs over at https://github.com/angular/flex-layout

Theming and RTL

Dark theme: To activate the dark theme simply add the class app-dark to the div.app in layout-dashboard.component.html

Custom theming: For detailed custom theming guide you can read the offical material 2 docs at https://github.com/angular/material2/blob/master/docs/theming.md

RTL: For direction use the [dir] directive with either ltr or rtl.

Helper classes

These are all the available helper classes used in the template

General
Background colors (Based on material palette)

Background colors are named using the format: md-{color}-{shade}

Where color is one of: red, pink , purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orage, brown, grey, blue-grey

Where shade is one of: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700

e.g md-red-500

Spacing

Spacing classes are named using the format: {property}{sides}-{size}

Where property is one of:

Where sides is one of:

Where size is one of:

Text

3rd party components