DOCSEARCHbyAlgolia
Submit Docs

ng-aquila Angular Component Library

repository·main·Indexed 42 days ago

https://github.com/allianz/ng-aquila

A white-label version of the Allianz Angular component library providing reusable UI components. Includes features like the Tile Group autoGrid, an MCP server for local development, and integrated documentation tools via @allianz/ngx-docs-cli and @allianz/ngx-docs-ui.

Tokens
78.6K
Snippets
316
Records
527
Agent score
51%

What's inside ng-aquila

  1. Use the Card component for content containers

    main
    The nx-card component is used to present content in a card container. It supports various visual styles including default borders, elevated shadows, and highlighted headers. It can also be configured as a selectable component (checkbox or radio behavior) or a fully clickable component.

  2. Use the Slider component

    main

    The Slider component allows users to select a value from a range between a minimum and a maximum value using a specified granularity (step size). Interaction is supported via mouse, touch, or keyboard (arrow keys).

    Note on Precision: The component uses decimal.js to handle floating-point precision errors. The slider value is automatically rounded to the closest value based on the step size. For example, a step of 0.1 limits the value to one decimal place, while 0.01 limits it to two.

  3. Use the Tile component for selection and data display

    main

    The Tile component is a versatile UI element that can display an icon, label, and hint text. It is an alternative to the circle toggle component and is part of the One Allianz Design System. It supports selectable, readonly, and disabled states, and can be used in both single-select and multi-select groups.

    Key components involved:

    • NxTileComponent: The individual tile.
    • NxTileGroupComponent: The container for managing selection logic and layout.

    Note: It is suggested not to mix Tile components and circle toggle components on the same page.

  4. Use the Timefield component

    main

    The nx-timefield component facilitates time entry. It supports a maximum of 2 characters per input field. By default, it uses a 24h format (e.g., 23:00, 12:35). Programmatic time input and model values are always handled in ISO 24h format.

    nx-timefield is built on top of nx-formfield and supports all standard formfield features including label, optionalLabel, appearance, negative, inline, and content projection slots like nxFormfieldPrefix, nxFormfieldSuffix, nxFormfieldAppendix, and nxLabelInfo.

    <nx-timefield></nx-timefield>

  5. Use the Code Input component

    main
    The Code Input component is designed for multi-digit code entry, such as One-Time Passwords (OTP) or PINs. It is used when users need to input a fixed set of characters that follow specific patterns (e.g., SMS verification codes). The component supports varying lengths and can be configured for specific character sets (uppercase, lowercase, digits, etc.).

  9. Use the Small Stage component for hero/banner areas

    main

    The Small Stage component is designed for the top of a page or section to serve as a heading area with illustrations. It is intended to take up 100% width of its container. While it can contain any content, it is recommended to use a heading and a topline or subline.

    Images in the Small Stage are fluid and adapt to the viewport size. On smaller screens (below 704px), the component automatically switches to displaying only the bottom image.

  10. Configure the Timepicker dropdown

    main

    You can enable a timepicker dropdown by setting the withTimepicker input to true. The dropdown appears when clicking the icon button or when the user starts typing.

    Customizing Timepicker Options

    Use the following inputs to control the range and granularity of the timepicker:

    • Set a start time or end time.
    • Set a specific interval between time increments.

    Global Configuration

    To enable the timepicker for all timefields in your application, provide TimefieldDefaultOptions and set withTimepicker: true in your module configuration.

    <nx-timefield [withTimepicker="true"></nx-timefield>

  11. Accessibility best practices for Notifications

    main

    To ensure compliance with accessibility standards when using notifications:

    1. Aria-live: Message toasts use an aria-live region. The default politeness is polite. You can change this via the politeness property in the toast configuration.
    2. Announcement Messages: Some screen readers fail to read content when a toast is opened from a template. To guarantee compatibility, always define an announcementMessage in your configuration.
    3. A11y Styles: Ensure @angular/cdk/a11y-prebuilt.css is imported so that aria-live messages do not visually appear on the webpage.
    4. LiveAnnouncer: For inline messages, it is recommended to use aria-live combined with the Angular CDK LiveAnnouncer.

  12. Use the NxInputDirective with Formfields

    main

    The nxInput directive is designed to be used inside an NxFormField. Using nxInput without a formfield will result in a lack of visual chrome (borders, outlines) and labels.

    Because it is a directive, it provides full support for native HTML input attributes and Angular form integrations like ngModel and Reactive Forms. You can also use it with <textarea> elements.

    <!-- example(input) -->