allianz/ng-aquila

Aquila – Angular Brand Kit 컴포넌트 라이브러리

Aquila (오픈소스) / Angular Brand Kit (구 NDBX)는 Allianz 디자인 시스템의 Angular 컴포넌트 라이브러리입니다. 최신 Angular (v19+) 패턴을 사용하세요: 독립형 컴포넌트, 신호, 새로운 제어 흐름 (@if, @for), inject() 등.

임포트 규칙

Aquila 컴포넌트는 독립형입니다. 컴포넌트를 직접 임포트하세요:

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],
})

임포트 경로 패턴: @allianz/ng-aquila/{component-name}

Aquila 전용 규칙

• NxInputDirective는 <input nxInput>를 <nx-formfield>로 감싸지 않고 사용하지 마세요.
• 유효성 검사 메시지를 위해 폼필드 안에서는 <nx-error nxFormfieldError>를 사용하세요.
• 실수로 폼이 제출되는 것을 방지하려면 <button nxButton>에 항상 type="button"을 설정하세요.
• Aquila 폼 컴포넌트와 함께 반응형 폼을 선호하세요.
• 인라인 CSS 스타일을 사용하지 말고 Aquila의 내장 스타일링을 활용하세요.

폼필드 유효성 검사 (반응형 폼)

<form [formGroup]="form">
  <nx-formfield label="Email">
    <input nxInput formControlName="email" type="email" />
    @if (form.controls.email.errors) {
      <nx-error nxFormfieldError>유효한 이메일을 입력해주세요</nx-error>
    }
  </nx-formfield>
</form>

드롭다운

<nx-formfield label="국가">
  <nx-dropdown formControlName="country">
    <nx-dropdown-item value="DE">독일</nx-dropdown-item>
    <nx-dropdown-item value="CH">스위스</nx-dropdown-item>
    <nx-dropdown-item value="AT">오스트리아</nx-dropdown-item>
  </nx-dropdown>
</nx-formfield>

모달 다이얼로그

import { NxDialogService } from '@allianz/ng-aquila/modal';

const modalRef = inject(NxDialogService).open(MyDialogComponent);
modalRef.afterClosed().subscribe(result => { /* 결과 처리 */ });

그리드 시스템

12열 반응형 그리드입니다. nxCol은 최대 7개의 쉼표로 구분된 브레이크포인트 값을 순서대로 받습니다: tiny, small, medium, large, xlarge, 2xlarge, 3xlarge. 값이 7개 미만이면 마지막 값이 나머지 브레이크포인트에 반복됩니다. (예: nxCol="12,8" → 12,8,8,8,8,8,8).

<div nxLayout="grid">
  <div nxRow>
    <div nxCol="12,12,6">왼쪽</div>
    <div nxCol="12,12,6">오른쪽</div>
  </div>
</div>

가장 많이 사용되는 컴포넌트

컴포넌트	선택자(Selector)
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

사용 사례별 컴포넌트 찾기

• 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

상세 API

전체 컴포넌트 API (입력, 출력, 메서드)는 프로젝트에 설치된 패키지의 컴포넌트 문서를 참조하세요: 일반적으로 node_modules/@allianz/ng-aquila/mcp/generated/components/{component-name}.md 또는 프로젝트 설정에 따라 유사한 경로에 있습니다. 대안: **/mcp/generated/**/로 글로브 검색을 실행하세요.