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

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)

Dropdown

Modal Dialog

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).

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/**/.