- 
-
- 
- 
-
- .colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg)
- 
- 
- Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v17 with PrimeNG v17. In case CLI is not installed already, use the command below to set it up.
- -npm install -g @angular/cliOnce 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 serveThe application should run at http://localhost:4200/, you may now start with the development of your application.
- -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.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. -
- -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, AppConfig } 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
- const config: AppConfig = {
- 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
- };
- this.layoutService.config.set(config);
- }
-
-}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: ['/']
- }
- ]
- },
- //...
- ];
- }
-}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.
- -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.
-Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...
- -
- “Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
-
-
- 
- 
- 
- 
- 
-
- 
- This is your empty page template to start building beautiful applications.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt - quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
- -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- - - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- - - -
- 
-
- PrimeNG
- - All input text components support floating labels by adding - (.p-float-label) to wrapper class. -
-
- {{country.name}}
- All form components have an invalid state style to display the validation errors when ng-invalid ng-dirty combination is applied by Angular.
-
- Confirmation Component Content via Child Route
-Payment Component Content via Child Route
-Personal Component Content via Child Route
-Seat Component Content via Child Route
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Vitae et leo duis ut diam. - Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. - Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. - Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. - Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. - Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. - Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. - Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. - Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. - Mattis aliquam faucibus purus in massa tempor nec. -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum.
-Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi - architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit - aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione - voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
- -At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum - deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati - cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est - laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. - Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
- -Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et - voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur - a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis - doloribus asperiores repellat. - Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. - Morbi dapibus luctus odio.
-
- {{option.name}}
-
- {{customer.country.name}}
- 
- {{customer.representative.name}}
-
- {{customer.country.name}}
-
- {{customer.representative.name}}
-
- {{customer.representative.name}}
-
- {{customer.country.name}}
- 
- npm install primeicons --savePrimeIcons use the pi pi-{icon} syntax such as pi pi-check. - A standalone icon can be displayed using an element such as i or span
- -<i class="pi pi-check"></i>
-<i class="pi pi-times"></i>Size of the icons can easily be changed using font-size property.
- -<i class="pi pi-check"></i><i class="pi pi-check" style="font-size: 2rem"></i>Special pi-spin class applies infinite rotate to an icon.
- -<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>Here is the current list of PrimeIcons, more icons will be added periodically. You may also request new icons at the issue tracker.
-
+ by
+ PrimeNG
+