allianz/ng-aquila

Aquila – Angular Brand Kit Komponentenbibliothek

Aquila (Open Source) / Angular Brand Kit (ehemals NDBX) ist die Allianz Design System Komponentenbibliothek für Angular. Verwende moderne Angular (v19+) Patterns: Standalone-Komponenten, Signals, neue Kontrollstruktur (@if, @for), inject(), etc.

Import-Regeln

Aquila-Komponenten sind Standalone. Importiere die Komponente direkt:

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-Pfad-Muster: @allianz/ng-aquila/{component-name}

Aquila-spezifische Regeln

• Verwende NxInputDirective niemals ohne <input nxInput> in <nx-formfield> zu wrappen
• Nutze <nx-error nxFormfieldError> für Validierungsmeldungen innerhalb von Formularfeldern
• Setze immer type="button" auf <button nxButton>, um versehentliches Absenden des Formulars zu verhindern
• Bevorzuge Reactive Forms mit Aquila-Formularkomponenten
• Verwende keine Inline-CSS-Styles; verlasse dich auf das integrierte Styling von Aquila

Formularfeld mit Validierung (Reactive Forms)

<form [formGroup]="form">
  <nx-formfield label="E-Mail">
    <input nxInput formControlName="email" type="email" />
    @if (form.controls.email.errors) {
      <nx-error nxFormfieldError>Bitte gib eine gültige E-Mail-Adresse ein</nx-error>
    }
  </nx-formfield>
</form>

Dropdown

<nx-formfield label="Land">
  <nx-dropdown formControlName="country">
    <nx-dropdown-item value="DE">Deutschland</nx-dropdown-item>
    <nx-dropdown-item value="CH">Schweiz</nx-dropdown-item>
    <nx-dropdown-item value="AT">Österreich</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 => { /* Ergebnis verarbeiten */ });

Grid-System

12-spaltiges responsives Grid. nxCol akzeptiert bis zu 7 durch Komma getrennte Breakpoint-Werte in der Reihenfolge: tiny, small, medium, large, xlarge, 2xlarge, 3xlarge. Wenn weniger als 7 Werte angegeben werden, wiederholt sich der letzte für die restlichen Breakpoints (z. B. nxCol="12,8" → 12,8,8,8,8,8,8).

<div nxLayout="grid">
  <div nxRow>
    <div nxCol="12,12,6">Links</div>
    <div nxCol="12,12,6">Rechts</div>
  </div>
</div>

Am häufigsten verwendete Komponenten

Komponente	Selektor
formfield	nx-formfield
input	input[nxInput]
button	button[nxButton]
icon	nx-icon
dropdown	nx-dropdown
checkbox	nx-checkbox
grid	[nxLayout]
headline	[nxHeadline]
copytext	[nxCopytext]
link	nx-link
accordion	nx-accordion
popover	[nxPopoverTriggerFor]
badge	nx-badge
datefield	input[nxDatefield]
modal	nx-modal
message	nx-message
data-display	nx-data-display
table	[nxHeaderCell]
tabs	nx-tab
list	ul[nxList]
radio-toggle	nx-radio-toggle
tooltip	[nxTooltip]
switcher	nx-switcher
spinner	nx-spinner
pagination	nx-pagination

Komponenten nach Anwendungsfall finden

• Formular: 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
• Tabelle: 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
• Medien: avatar, icon, image, video
• Interaktion: action, button, link, page-search, signal-button
• Auswahl: checkbox, circle-toggle, dropdown, radio-toggle, taglist

Detaillierte API

Die vollständige Komponenten-API (Inputs, Outputs, Methoden) findest du in der Komponentendokumentation im installierten Paket des Projekts: ormalerweise unter node_modules/@allianz/ng-aquila/mcp/generated/components/{component-name}.md oder einem ähnlichen Pfad, abhängig von der Projektkonfiguration. Fallback: Führe eine Glob-Suche mit **/mcp/generated/**/ durch.