Documentation

Getting Started

Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v14 with PrimeNG v14. In case CLI is not installed already, use the command below to set it up.

npm install -g @angular/cli

Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.

cd sakai
npm install
ng serve

The application should run at http://localhost:4200/, you may now start with the development of your application.

Important CLI Commands

Following commands are derived from CLI.

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.

Run 'ng generate component component-name' 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.

Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).

Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

Run 'ng help' for more options.

Structure

Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the src/app/layout folder, and the assets are in the src/assets/layout folder.

Default Configuration

Initial layout configuration can be defined at the main app component by injecting the LayoutService, this step is optional and only necessary when customizing the defaults. Note that theme and scale are not reactive since theme is configured outside of Angular at index.html by default and initial scale is defined with the $scale at layout.scss. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values to avoid sync issues.

import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { LayoutService } from './layout/service/app.layout.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig, private layoutService: LayoutService) { }

    ngOnInit(): void {
        this.primengConfig.ripple = true;       //enables core ripple functionality

        //optional configuration with the default configuration
        this.layoutService.config = {
            ripple: false,                      //toggles ripple on and off
            inputStyle: 'outlined',             //default style for input elements
            menuMode: 'static',                 //layout mode of the menu, valid values are "static" and "overlay"
            colorScheme: 'light',               //color scheme of the template, valid values are "light" and "dark"
            theme: 'lara-light-indigo',         //default component theme for PrimeNG
            scale: 14                           //size of the body font size to scale the whole application
        };
    }

}

Menu

Menu is a separate component defined in src/app/layout/app.menu.component.ts file and based on PrimeNG MenuModel API. In order to define the menuitems, navigate to this file and define your own model as a nested structure.

import { OnInit } from '@angular/core';
import { Component } from '@angular/core';

@Component({
    selector: 'app-menu',
    templateUrl: './app.menu.component.html'
})
export class AppMenuComponent implements OnInit {

    model: any[] = [];

    ngOnInit() {
        this.model = [
            {
                label: 'Home',
                items: [
                    {
                        label: 'Dashboard',
                        icon: 'pi pi-fw pi-home',
                        routerLink: ['/']
                    }
                ]
            },
            //...
        ];
    }
}

Integration with Existing Angular CLI Projects

Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.

Theme

Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme to your bundle that are located inside assets/layout/styles/theme/ folder such as assets/layout/styles/theme/lara-light-indigo/theme.css.

Another alternative would be creating dynamic bundles, please see the video tutorial for an example.