allianz/ng-aquila/aquila

Aquila – Angular Brand Kit Component Library

Aquila (open source) / Angular Brand Kit (formerly NDBX) is the Allianz Design System component library for Angular. Use modern Angular (v19+) patterns: standalone components, signals, new control flow (@if, @for), inject(), etc.

Import Rules

Aquila components are standalone. Import the component directly:

import { NxButtonComponent } from '@allianz/ng-aquila/button';
import { NxFormfieldComponent } from '@allianz/ng-aquila/formfield';
import { NxInputDirective } from '@allianz/ng-aquila/input';
@Component({
  imports: [NxButtonComponent, NxFormfieldComponent, NxInputDirective],
})

Import path pattern: @allianz/ng-aquila/{component-name}

Aquila-Specific Rules

• Never use NxInputDirective without wrapping <input nxInput> in <nx-formfield>
• Use <nx-error nxFormfieldError> for validation messages inside formfields
• Always set type="button" on <button nxButton> to prevent accidental form submission
• Prefer Reactive Forms with Aquila form components
• Do not use inline CSS styles; rely on Aquila's built-in styling

Formfield with Validation (Reactive Forms)

<form [formGroup]="form">
  <nx-formfield label="Email">
    <input nxInput formControlName="email" type="email" />
    @if (form.controls.email.errors) {
      <nx-error nxFormfieldError>Please enter a valid email</nx-error>
    }
  </nx-formfield>
</form>

Dropdown

<nx-formfield label="Country">
  <nx-dropdown formControlName="country">
    <nx-dropdown-item value="DE">Germany</nx-dropdown-item>
    <nx-dropdown-item value="CH">Switzerland</nx-dropdown-item>
    <nx-dropdown-item value="AT">Austria</nx-dropdown-item>
  </nx-dropdown>
</nx-formfield>

Modal Dialog

import { NxDialogService } from '@allianz/ng-aquila/modal';
const modalRef = inject(NxDialogService).open(MyDialogComponent);
modalRef.afterClosed().subscribe(result => { /* handle result */ });

Grid System

12-column responsive grid. nxCol accepts up to 7 comma-separated breakpoint values in order: tiny, small, medium, large, xlarge, 2xlarge, 3xlarge. If fewer than 7 values are provided, the last one repeats for the remaining breakpoints (e.g. nxCol="12,8" → 12,8,8,8,8,8,8).

<div nxLayout="grid">
  <div nxRow>
    <div nxCol="12,12,6">Left</div>
    <div nxCol="12,12,6">Right</div>
  </div>
</div>

Most Used Components

Find Components by Use Case

• form: autocomplete, checkbox, circle-toggle, code-input, datefield, dropdown, file-uploader, formfield, input, natural-language-form, phone-input, radio-toggle, rating, slider, switcher, timefield
• navigation: breadcrumb, header, menu, tabs, pagination
• table: comparison-table, dynamic-table, table
• feedback: badge, indicator, message, modal, notification-panel, progress-stepper, progressbar, spinner, tooltip
• layout: accordion, card, footer, grid, sidepanel, small-stage, toolbar
• overlay: modal, overlay, popover
• media: avatar, icon, image, video
• interaction: action, button, link, page-search, signal-button
• selection: checkbox, circle-toggle, dropdown, radio-toggle, taglist

Detailed API

For full component API (inputs, outputs, methods) read the component docs in the installed package of the project: typically node_modules/@allianz/ng-aquila/mcp/generated/components/{component-name}.md or in a similar path depending on project setup. Fallback: run a glob search with **/mcp/generated/**/.