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 for my items includes:
-
Responding to questions or problems regarding the item and its features
Fixing bugs and reported issues
Providing updates to ensure compatibility with new software versions
Item support does not include:
Before seeking support please:
-
Make sure your question is a valid item Issue and not a customization request.
Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
Make sure to double check the item FAQs.
If you have customized your item and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
Most of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
Make sure to state the name of the item you are having issues with when requesting support via ThemeForest.
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
.radius-none
(no round corners)
.radius-round
(border corners based on $border-radius-base)
.radius-circle
(circle radius corners)
.overflow-visible
.overflow-hidden
.overflow-auto
.block
(display block)
.button-block
.inline-block
.center-block
.relative
(position relative)
.fixed
.absolute
.shadow-none
.border-none
.background-none
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:
t
- for classes that set margin-top
or padding-top
b
- for classes that set margin-bottom
or padding-bottom
l
- for classes that set margin-left
or padding-left
r
- for classes that set margin-right
or padding-right
x
- for classes that set both *-left
and *-right
y
- for classes that set both *-top
and *-bottom
a
- for classes that set a margin
or padding
on all 4 sides of the element
Where size is one of:
0
- for classes that eliminate the margin
or padding
by setting it to 0
1
- (by default) for classes that set the margin
or padding
to $spacer-x
or $spacer-y
2
- (by default) for classes that set the margin
or padding
to $spacer-x * 1.5
or $spacer-y * 1.5
3
- (by default) for classes that set the margin
or padding
to $spacer-x * 3
or $spacer-y * 3
Text
3rd party components
-
Angular component Layout engine; using flexbox-2016 css
Material Design components for Angular
Angular calendar - A flexible calendar component for angular 2.0+ that can display events on a month, week or day view.
A feature-rich yet lightweight data-table crafted for Angular2
Angular components for Google Maps
A simple yet powerful tree component for Angular2
Simple drag and drop with dragula
An open-source JavaScript library for mobile-friendly interactive maps
Beautiful charts for Angular2 based on Chart.js
Easy to use Angular2 components for files upload
An implementation of angular translate for Angular
angular2 validation
Your powerful, rich text editor
Simple wrapper for cross-browser usage of the JavaScript Fullscreen API