Optima Theme Documentation
Overview Getting Started 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 for my items includes:

Item support does not include:

What is it?

Optima is a creative admin template built for Angular 5 and Angular 6. 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.

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

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

3rd party components