Getting started

Install, provide, use. Three steps, and then 65 modules behave the way the API reference on every module page says they do.

1 · Install

@primeuix/themes supplies the theme preset and primeicons the icon font. Both are optional — see Theming for what you lose by dropping them.

pnpm add @anguless/angulux @primeuix/themes primeicons

2 · Provide it

provideAngulux() once, at the application root. Nothing else is global.

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';import { provideAngulux } from '@anguless/angulux/config';import Aura from '@primeuix/themes/aura';export const appConfig: ApplicationConfig = {    providers: [        provideZonelessChangeDetection(),        provideAngulux({            theme: { preset: Aura }        })    ]};

Zoneless is not a requirement, it is what this is tested under. The library's spec suite and this entire site run zoneless, so every demo you see is also a zoneless smoke test. If your application still uses zone.js, angulux works — it is simply the mode with less evidence behind it.

3 · Add the icon stylesheet

Skip this and components still work; their icons render as empty boxes. The icon font is a plain stylesheet, so it goes in the builder's list rather than through a provider.

/* angular.json -> projects.<app>.architect.build.options.styles */"styles": [    "src/styles.css",    "node_modules/primeicons/primeicons.css"]

4 · Use a component

Each module is its own entry point, so you import only what you render. The exact import line for any module is printed at the top of its page.

import { Component } from '@angular/core';import { FormsModule } from '@angular/forms';import { ButtonModule } from '@anguless/angulux/button';import { InputNumberModule } from '@anguless/angulux/inputnumber';@Component({    selector: 'app-order',    imports: [FormsModule, ButtonModule, InputNumberModule],    templateUrl: './order.html'})export class Order {    quantity = 1;    save(): void {        /* … */    }}

<agl-button label="Save" (onClick)="save()" /><agl-inputNumber [(ngModel)]="quantity" [min]="0" [max]="100" />

What you are getting — and what you are not

Worth knowing before you depend on this rather than after.

Where to go next