### Installing OpenNG Icons
Source: https://optimus.openng.org/icons
Install the icon library package via npm.
```bash
npm install @openng/icons
```
--------------------------------
### Install Optimus UI dependencies
Source: https://optimus.openng.org/installation
Use these commands to install the core library and themes package using your preferred package manager.
```bash
# Using npm
npm install @openng/optimus-ui @openng/optimus-ui-themes
# Using yarn
yarn add @openng/optimus-ui @openng/optimus-ui-themes
# Using pnpm
pnpm add @openng/optimus-ui @openng/optimus-ui-themes
```
--------------------------------
### Install Optimus UI
Source: https://optimus.openng.org/
Use the Angular CLI to add the Optimus UI package to your project.
```bash
ng add @openng/optimus-ui
```
--------------------------------
### Basic PickList Implementation
Source: https://optimus.openng.org/picklist
A standard PickList setup using source and target signals with drag and drop enabled.
```typescript
import { Component, OnInit, inject, signal } from '@angular/core';
import { PickListModule } from '@openng/optimus-ui/picklist';
import { ProductService } from '@/service/productservice';
import { Product } from '@/domain/product';
@Component({
template: `
`,
standalone: true,
imports: [PickListModule],
providers: [ProductService]
})
export class PicklistBasicDemo implements OnInit {
private productService = inject(ProductService);
sourceProducts = signal([]);
targetProducts = signal([]);
ngOnInit() {
this.carService.getProductsSmall().then((products) => {
this.sourceProducts.set(products);
});
}
}
```
--------------------------------
### Implement a Basic Menubar in Angular
Source: https://optimus.openng.org/menubar
Demonstrates the basic setup of a Menubar component using a model of MenuItem objects.
```typescript
import { Component, OnInit } from '@angular/core';
import { MenubarModule } from '@openng/optimus-ui/menubar';
import { MenuItem } from '@openng/optimus-ui/api';
@Component({
template: `
`,
standalone: true,
imports: [MenubarModule]
})
export class MenubarBasicDemo implements OnInit {
items: MenuItem[] | undefined;
ngOnInit() {
this.items = [
{
label: 'Home',
icon: 'pi pi-home'
},
{
label: 'Features',
icon: 'pi pi-star'
},
{
label: 'Projects',
icon: 'pi pi-search',
items: [
{
label: 'Components',
icon: 'pi pi-bolt'
},
{
label: 'Blocks',
icon: 'pi pi-server'
},
{
label: 'UI Kit',
icon: 'pi pi-pencil'
},
{
label: 'Templates',
icon: 'pi pi-palette',
items: [
{
label: 'Apollo',
icon: 'pi pi-palette'
},
{
label: 'Ultima',
icon: 'pi pi-palette'
}
]
}
]
},
{
label: 'Contact',
icon: 'pi pi-envelope'
}
];
}
}
```
--------------------------------
### Customize Menu with Templates
Source: https://optimus.openng.org/menu
Shows how to use the start template slot to inject custom content into the menu.
```typescript
import { Component, OnInit } from '@angular/core';
import { AvatarModule } from '@openng/optimus-ui/avatar';
import { BadgeModule } from '@openng/optimus-ui/badge';
import { Menu, MenuModule } from '@openng/optimus-ui/menu';
import { RippleModule } from '@openng/optimus-ui/ripple';
import { MenuItem } from '@openng/optimus-ui/api';
@Component({
template: `
Team Members
{{ member.name }}
{{ member.email }}
`,
standalone: true,
imports: [ButtonModule, PopoverModule]
})
export class PopoverSelectdataDemo {
selectedMember: any = null;
members: any[];
toggle(event) {
this.op.toggle(event);
}
selectMember(member) {
this.selectedMember = member;
this.op.hide();
}
}
```
--------------------------------
### Basic Overlay Implementation
Source: https://optimus.openng.org/overlay
Demonstrates a basic overlay component with responsive settings and visibility toggling.
```typescript
import { Component } from '@angular/core';
import { ButtonModule } from '@openng/optimus-ui/button';
@Component({
template: `
`,
standalone: true,
imports: [ButtonModule]
})
export class OverlayBasicDemo {
overlayVisible: boolean = false;
toggle() {
this.overlayVisible = !this.overlayVisible;
}
}
```
--------------------------------
### Implementing ContextMenu with Router Navigation
Source: https://optimus.openng.org/contextmenu
Demonstrates configuring a ContextMenu with different navigation types: routerLink, programmatic routing via command, and external URL navigation.
```typescript
import { Component, OnInit } from '@angular/core';
import { ContextMenuModule } from '@openng/optimus-ui/contextmenu';
import { MenuItem } from '@openng/optimus-ui/api';
@Component({
template: `
`,
standalone: true,
imports: [ContextMenuModule]
})
export class ContextmenuRouterDemo implements OnInit {
items: MenuItem[] | undefined;
ngOnInit() {
this.items = [
{
label: 'Router Link',
icon: 'pi pi-palette',
routerLink: '/theming'
},
{
label: 'Programmatic',
icon: 'pi pi-link',
command: () => {
this.router.navigate(['/installation']);
}
},
{
label: 'External',
icon: 'pi pi-home',
url: 'https://angular.io//'
}
];
}
}
```
--------------------------------
### provideOptimus(config)
Source: https://optimus.openng.org/theming
Configures the Optimus UI library with a theme preset and CSS generation options.
```APIDOC
## provideOptimus(config)
### Description
Initializes the Optimus UI library within an Angular application configuration. It accepts a configuration object to define the theme preset and CSS generation behavior.
### Parameters
- **config** (Object) - Required
- **theme** (Object) - Optional: Configuration for the theme.
- **preset** (Object) - Required: The theme preset to use (e.g., Aura).
- **options** (Object) - Optional: Configuration for CSS generation.
- **prefix** (string) - Optional: The prefix for CSS variables (default: 'p').
- **darkModeSelector** (string) - Optional: CSS rule for dark mode encapsulation (default: 'system').
- **cssLayer** (Object) - Optional: Configuration for CSS layers.
- **name** (string) - Required: Name of the CSS layer.
- **order** (string) - Required: Order of the CSS layers.
### Example
```typescript
provideOptimus({
theme: { preset: Aura },
options: {
prefix: 'my',
darkModeSelector: '.my-app-dark',
cssLayer: {
name: 'optimus',
order: 'app-styles, optimus, another-css-library'
}
}
})
```
```