### Run Local Documentation

Source: https://github.com/allianz/ng-aquila/blob/main/README.md

Install dependencies and start the local documentation server for the Aquila library.

```bash
npm ci
npm start
```

--------------------------------

### Run ng-aquila Documentation Application

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Install dependencies and start the documentation application locally to access it in your browser.

```shell
# Install all dependencies
npm ci
```

```shell
# Run the app with
npm start
```

--------------------------------

### Install Angular CLI and create new project

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/guides/getting-started.md

Use these commands to globally install the Angular CLI and then create a new Angular project. This step is common for both automatic and manual ng-aquila setup.

```console
npm install -g @angular/cli
ng new my-allianz-project
```

--------------------------------

### Register Example Component in Module

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Add new example components to the `EXAMPLES` array and the `components()` method within the dedicated example module.

```ts
const EXAMPLES = [
    // ...
    ComponentBasicExample,
];

// ...
export class ButtonExamplesModule {
    static components() {
        return {
            // ...
            'component-basic': ComponentBasicExample,
        };
    }
}
```

--------------------------------

### Generate Documentation with Private Examples

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Run this CLI command with the `--private-examples` flag to include private examples from a specified path during documentation generation.

```shell
npm run cli -- generate ng-aquila/projects/ng-aquila ... --private-examples <private-example-path>
```

--------------------------------

### Install ng-aquila and Angular CDK manually

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/guides/getting-started.md

Navigate into your project directory and install the ng-aquila library and its peer dependency, Angular CDK, for manual setup.

```console
cd my-allianz-project
npm install @allianz/ng-aquila
npm install @angular/cdk
```

--------------------------------

### Angular Example File Structure

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ngx-docs-cli/README.md

Shows the recommended directory structure for Angular example components, including TypeScript, HTML, and CSS files.

```text
|- documentation
|  |- examples
|  |  |- primary-button
|  |  |  |- primary-button-example.ts
|  |  |  |- primary-button-example.html
|  |  |  |- primary-button-example.css
```

--------------------------------

### Example Skill Directory Paths

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/guides/develop-with-ai.md

These are example file paths for manually placing the Aquila skill file for different AI assistants like Copilot and Claude code.

```bash
.agents/skills/aquila/SKILL.md // Copilot, Antigravity, Codex
.claude/skills/aquila/SKILL.md // Claude code
```

--------------------------------

### Install ngx-docs-cli

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ngx-docs-cli/README.md

Install the ngx-docs-cli package using npm.

```bash
npm install @allianz/ngx-docs-cli
```

--------------------------------

### Install dependencies with npm

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Install all project dependencies required for development and building.

```console
npm install
```

--------------------------------

### Install A1 Migration Skill with npx

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/guides/develop-with-ai.md

Run this command to install the A1 Migration Skill, which helps migrate applications to the new Design System. Double-check changes as it's in beta.

```sh
npx skills add allianz/ng-aquila --skill a1-migration
```

--------------------------------

### Generate MCP context and resources

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Create all necessary context, metadata, and example files required for the MCP server.

```console
npm run mcp:generate-context
```

--------------------------------

### Embed Angular Example in Markdown

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ngx-docs-cli/README.md

Syntax for embedding a dynamically loaded Angular example component into a markdown file.

```html
<!-- example(primary-button) -->
```

--------------------------------

### Mark Private Example in Markdown

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Use this placeholder in markdown for private examples, setting `privateExample` to true and optionally hiding the StackBlitz button.

```html
<!-- example(component-basic-private, { "privateExample": true, "hideStackblitzButton": true }) -->
```

--------------------------------

### Add Example Placeholder in Markdown

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Use this HTML comment as a placeholder in markdown files; the CLI tool replaces it with an HTML element for the example component.

```html
<!-- example(component-basic) -->
```

--------------------------------

### Action Button HTML Example with Indicator

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/static/best-practices.md

Illustrates styling `button` elements with `nxAction` for navigation and displaying indicators using `nx-indicator` based on notification counts.

```html
<nav aria-label="menu">
    @for (action of actions; track action) {
    <button
        nxAction
        (click)="onSelect(action)"
        [selected]="action === selectedAction"
        [attr.aria-label]="getAriaLabel(action.label, $any(action.notificationCount), action.notification)"
    >
        <nx-icon nxActionIcon [name]="action.icon" aria-hidden="true"></nx-icon>
        <span class="label-content">
            {{action.label}} @if (action.notification) {
            <nx-indicator position="after-text"> {{ getIndicatorText($any(action.notificationCount)) }} </nx-indicator>
            }
        </span>
    </button>
    }
</nav>
```

--------------------------------

### Input Field and Formfield HTML Example

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/static/best-practices.md

Demonstrates the use of `nx-formfield` with `nxInput` and `nx-error` for validation messages within a grid layout.

```html
<div nxLayout="grid">
    <div nxRow>
        <div nxCol="6">
            <nx-formfield label="Text">
                <input nxInput type="text" />
            </nx-formfield>
        </div>
        <div nxCol="6">
            <nx-formfield label="Password">
                <input nxInput type="password" />
            </nx-formfield>
        </div>
        <div nxCol="6">
            <nx-formfield label="E-Mail">
                <input nxInput type="email" ngModel email />
                <nx-error nxFormfieldError> <strong>Error: </strong>Please type in a valid email address </nx-error>
            </nx-formfield>
        </div>
    </div>
</div>
```

--------------------------------

### Accordion HTML Example

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/static/best-practices.md

Shows how to structure an accordion with multiple expandable panels using `nx-accordion` and `nx-expansion-panel`. The `multi` input allows expanding several panels simultaneously.

```html
<nx-accordion [multi]="multi">
    <nx-expansion-panel>
        <nx-expansion-panel-header>
            <nx-expansion-panel-title>About us</nx-expansion-panel-title>
        </nx-expansion-panel-header>
        <p nxCopytext="normal">Lorem ipsum</p>
    </nx-expansion-panel>
    <nx-expansion-panel>
        <nx-expansion-panel-header>
            <nx-expansion-panel-title>Contact us</nx-expansion-panel-title>
        </nx-expansion-panel-header>
        <p nxCopytext="normal">Lorem ipsum</p>
    </nx-expansion-panel>
</nx-accordion>
```

--------------------------------

### Markdown Frontmatter Example

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ngx-docs-cli/README.md

Example of frontmatter used in markdown files to define metadata like title and category for components.

```yaml
---
title: Formfield
category: Forms
---
```

--------------------------------

### Automatic MCP Server Setup for VS Code

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/guides/develop-with-ai.md

Execute this command to automatically configure the MCP server for Aquila in Visual Studio Code, creating or updating the .vscode/mcp.json file.

```bash
npx --no-install ng-aquila-add-mcp-server
```

--------------------------------

### Add Title to Example Component

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Include a JSDoc `@title` tag above the `@Component` decorator to provide a title for the example, used in generation and display.

```ts
/** @title Component basic example */
@Component({
	...

```

--------------------------------

### Add Aquila Skill using npx

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/guides/develop-with-ai.md

Use this command to automatically download and install the Aquila skill into your project's AI assistant skills directory.

```bash
npx skills add allianz/ng-aquila --skill aquila
```

--------------------------------

### Link ng-aquila in target project

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Install the locally-linked ng-aquila package in your target project.

```console
npm link @allianz/ng-aquila
```

--------------------------------

### CSS High Contrast Mode Styling Example

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Apply specific styles when Windows high contrast mode is active, using system colors like `windowText` for accessibility.

```css
@media screen and (-ms-high-contrast: active) {
    .css-class {
        color: windowText;
    }
}
```

--------------------------------

### Import NxDocumentationIconModule for Open Source Projects

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/icon/icon.md

For open-source projects, import `NxDocumentationIconModule` to map internal icon names to Font Awesome icons. This requires installing `@fortawesome/fontawesome-free` and including its CSS in your project.

```ts
import { NxDocumentationIconModule } from '@allianz/ng-aquila/documentation-icons';
```

--------------------------------

### Import NxInputModule

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/formfield/formfield.md

Import this module to automatically include NxFormfieldModule, simplifying setup for form fields.

```ts
import { NxInputModule } from '@allianz/ng-aquila/input';
```

--------------------------------

### Set `alignSelf` for initial breakpoints

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/examples/grid/grid-align-self/grid-align-self-example.html

Applies 'start' alignment for tiny and small breakpoints, and 'end' for medium and larger breakpoints, demonstrating breakpoint-specific `alignSelf` values.

```HTML
alignSelf="start,start,end"
```

--------------------------------

### MCP Server Setup for Claude code

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/guides/develop-with-ai.md

Use this command to add the Aquila MCP server configuration specifically for Claude code, scoping it to the current project.

```bash
claude mcp add ng-aquila-mcp-server -- npx ng-aquila-mcp --scope project
```

--------------------------------

### Dropdown component - anti-pattern with configuration

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Example of a dropdown implemented with configuration-based API. This approach is inflexible and blocks users from adding custom behavior, icons, or styling to individual items.

```html
<!-- 🚫 BAD EXAMPLE: don't do this -->
<nx-dropdown [items]="[{label: 'Apple', value: 'apple'}, {label: 'Banana', value: 'banana'}]"></nx-dropdown>
```

--------------------------------

### Render Tags with Custom Content Projection and Item Count

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/examples/taglist/tag-label-rendering/tag-label-rendering-example.html

This example demonstrates how to project custom content inside each tag, allowing for custom formatting like titlecase and the display of additional data such as an item count.

```html
@for (tag of tagsWithCount(); track tag.label) { {{ tag.label | titlecase }} {{ tag.count }} items }
```

--------------------------------

### Importing Legacy AG Grid Aquila Theme CSS in Angular.json

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/ag-grid/ag-grid.md

Configure `angular.json` to import the base AG Grid styles, Alpine theme, and the deprecated `ag-theme-aquila.css` for legacy theme setup.

```json
"styles": [
    "node_modules/ag-grid-community/styles/ag-grid.css",
    "node_modules/ag-grid-community/styles/ag-theme-alpine.css",
    "node_modules/@allianz/ng-aquila/themes/ag-theme-aquila.css",
]
```

--------------------------------

### Run all MCP build steps at once

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Execute all MCP initialization steps (generate context, build, and copy resources) in a single command.

```console
npm run mcp:init
```

--------------------------------

### Build and Publish Schematics to NPM

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/schematics/README.md

Run these commands sequentially to build documentation and then publish the schematic package to npm.

```bash
npm run build:docs
```

```bash
npm publish
```

--------------------------------

### Link package locally and verify

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Create a local npm link to the built package and verify the link was created successfully.

```console
cd dist/ng-aquila
npm link
npm list -g # verify link
```

--------------------------------

### Initialize A1 Migration Tracking in package.json (JSON)

Source: https://github.com/allianz/ng-aquila/blob/main/skills/a1-migration/SKILL.md

Add the `a1Migration` key to your `package.json` after completing the first migration step (theme application) to track progress.

```json
"a1Migration": {
  "skillVersion": "0.1.3",
  "appliedAt": "YYYY-MM-DD",
  "theme": "<spacious|compact|dense>",
  "steps": ["theme"]
}
```

--------------------------------

### CSS Component Token Definition Example

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Example of a component-specific CSS custom property (token) defining the background color for a primary button, reusing a global token.

```css
--button-primary-background-color: interactive-primary;
```

--------------------------------

### Display Schematics CLI Help

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/schematics/README.md

Use this command to view available options and commands for the Schematics CLI.

```bash
schematics --help
```

--------------------------------

### Apply A1 Theme Schematic

Source: https://github.com/allianz/ng-aquila/blob/main/skills/a1-migration/SKILL.md

Run this command from the project root to apply the A1 theme. Replace <THEME> with 'spacious', 'compact', or 'dense' based on the desired information density.

```bash
ng g @allianz/ngx-brand-kit:apply-a1-theme --type=<THEME>
```

--------------------------------

### Configure NxvDocumentationModule in app.module.ts

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ngx-docs-ui/README.md

Import NxvDocumentationModule and NXV_MANIFEST_TOKEN, set up routing with a redirect to /welcome, and provide the manifest.json file. The module handles all routing and includes components for generated documentation files.

```typescript
import { NXV_MANIFEST_TOKEN, NxvDocumentationModule } from '@allianz/ngx-docs-ui';
import * as NX_MANIFEST from '@allianz/ng-aquila/documentation/manifest.json';
import { RouterModule } from '@angular/router';

const ROUTES = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: '/welcome',
    },
];

@NgModule({
    imports: [RouterModule.forRoot(ROUTES, { enableTracing: false }), NxvDocumentationModule.forRoot()],
    providers: [{ provide: NXV_MANIFEST_TOKEN, useValue: NX_MANIFEST }],
})
export class AppModule {}
```

--------------------------------

### Conditional Display of AM/PM Labels for Twelve-Hour Format

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/timefield/timefield.component.html

This example demonstrates rendering AM and PM labels only when 'twelveHourFormat' is enabled, using interpolation for the label values.

```html
@if (twelveHourFormat) { {{ labelAM }} {{ labelPM }} }
```

--------------------------------

### Iterating over Rating Values with @for

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/rating/rating.component.html

Use the `@for` block to render a series of elements based on a collection, such as individual rating stars. This example iterates from 1 to 5.

```html
@for (rating of [1, 2, 3, 4, 5]; track rating) {  }
```

--------------------------------

### Build All ng-aquila Monorepo Packages

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Execute this command to build the library, ngx-docs-ui package, and the documentation application in AOT and production modes.

```shell
$ npm run build
```

--------------------------------

### Ng-Aquila Date Field with Formfield

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/static/best-practices.md

Example of integrating nx-datefield within an nx-formfield for date input. Requires NxDatefieldModule import and supports custom DateAdapter.

```html
<nx-formfield label="Date">
    <nx-datefield [(ngModel)]="selectedDate" placeholder="dd.mm.yyyy"></nx-datefield>
</nx-formfield>
```

--------------------------------

### Run Project Tests

Source: https://github.com/allianz/ng-aquila/blob/main/CODING_GUIDELINES.md

Command to execute the project's tests using npm.

```bash
npm run test:lib
```

--------------------------------

### Define Component Entry Point in package.json

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Create a package.json file in your component folder to configure its secondary entry point, specifying the entryFile for all public exports.

```json
{
  "ngPackage": {
    "lib": {
      "entryFile": "public-api.ts"
    }
  }
}
```

--------------------------------

### Build the ng-aquila Library

Source: https://github.com/allianz/ng-aquila/blob/main/CLAUDE.md

Compile the ng-aquila component library for distribution.

```bash
npx ng build ng-aquila
```

--------------------------------

### Displaying Form Group Value as JSON

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/examples/card/selectable-card-radio/selectable-card-radio-example.html

This example demonstrates how to bind and display the current value of an Angular FormGroup object, formatted as JSON, within the template.

```html
{{ formGroup.value | json }}
```

--------------------------------

### Autocomplete Outline Template Example

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/examples/autocomplete/autocomplete-outline/autocomplete-outline-example.html

This HTML snippet shows the Angular template syntax for iterating over a list of `filteredOptions` and displaying each option within an autocomplete component.

```html
@for (option of filteredOptions; track option) { {{ option }} }
```

--------------------------------

### Import ng-aquila theming utilities

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/theming/theming.md

Import the core ng-aquila theming utilities to enable custom theme definition and registration.

```scss
@import '@allianz/ng-aquila/styles/theming';
```

--------------------------------

### Subscribe to viewport changes using NxViewportService

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/layout/layout.md

Inject NxViewportService to react to viewport size changes, for example, to conditionally show or hide components based on a maximum breakpoint.

```ts
import { NxViewportService, NxBreakpoints } from '@allianz/ng-aquila/utils';
showComponentX: boolean;

constructor(private viewportService: NxViewportService) {
  this.viewportService.max(NxBreakpoints.BREAKPOINT_LARGE)
    .subscribe(isMaximumLarge => this.showComponentX = isMaximumLarge);
}
```

--------------------------------

### Build the ng-aquila library

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Compile the ng-aquila library for distribution.

```console
npm run build:lib
```

--------------------------------

### Conditional Display of Rating Labels with @if

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/rating/rating.component.html

Apply the `@if` block to conditionally display content, such as start and end labels for the rating component. Content is rendered only if `startLabel` or `endLabel` is truthy.

```html
@if (startLabel || endLabel) {

{{ startLabel }} {{ endLabel }}

}
```

--------------------------------

### Run ngx-docs-cli Generation

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ngx-docs-cli/README.md

Execute the ngx-docs-cli tool to generate documentation, specifying the path to your source code.

```bash
npx ndx-docs ./path/to/src
```

--------------------------------

### Using HTML autocomplete attribute for email input

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/accessibility/accessibility.md

Enhance form accessibility and usability by suggesting values for input fields. This example applies the `autocomplete` attribute to an email input.

```html
<input type="email" id="email" name="email" autocomplete="email">
```

--------------------------------

### Build the MCP server

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Compile the MCP TypeScript sources into the distribution folder.

```console
npm run mcp:build
```

--------------------------------

### Run All Library Tests

Source: https://github.com/allianz/ng-aquila/blob/main/CLAUDE.md

Execute the complete test suite for the ng-aquila library using ChromeHeadless browser without watch mode.

```bash
npx ng test ng-aquila --browsers=ChromeHeadless --watch=false
```

--------------------------------

### Configure ng-aquila base styles in angular.json

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/guides/getting-started.md

Update your `angular.json` file to include ng-aquila's `normalize.css` and a theme file like `aquila.css` in the `styles` array for manual setup.

```json
"architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          // ...
          "styles": [
            // ...
            "node_modules/@allianz/ng-aquila/css/normalize.css",
            "node_modules/@allianz/ng-aquila/themes/aquila.css"
          ]
        }
      }
    }
```

--------------------------------

### Inspect the MCP server

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Launch the Model Context Protocol inspector to debug and inspect the ng-aquila MCP server.

```console
npx @modelcontextprotocol/inspector npx ng-aquila-mcp
```

--------------------------------

### Display Item Label

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/examples/virtual-scroll/virtual-scroll-events/virtual-scroll-events-example.html

A basic example of binding an item's label property within an Angular template, typically used inside an *ngFor loop for virtual scroll items.

```html
{{ item.label }}
```

--------------------------------

### Example Component Markdown Metadata

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Add metadata at the top of your component's markdown file to define its title, category, B2C/expert status, and stability, which is used for overview tables and navigation.

```yaml
---
title: Button
category: components
b2c: true
expert: true
stable: done
---
```

--------------------------------

### Basic Button Usage with Ng-Aquila

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/static/best-practices.md

Demonstrates how to apply Ng-Aquila button styles and size using the nxButton directive. Requires NxButtonModule import.

```html
<button nxButton="primary large" type="button">Primary</button>
```

--------------------------------

### Configure VS Code MCP server with npm link

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/mcp/README.md

Set up the ng-aquila MCP server in VS Code's mcp.json configuration using the npm-linked package.

```json
"servers": {
    "ng-aquila-mcp-server": {
        "command": "npx",
        "args": [
            "ng-aquila-mcp"
        ]
    }
}
```

--------------------------------

### Build ng-aquila Library Only

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Use this command to build only the ng-aquila library, placing artifacts in the `dist` folder.

```shell
$ npm run build:lib
```

--------------------------------

### Display Visible Scroll Range

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/examples/virtual-scroll/virtual-scroll-events/virtual-scroll-events-example.html

This snippet demonstrates how to display the start and end indices of the items currently visible in the virtual scroll viewport. It uses an @if block to handle cases where the range might be unknown.

```html
@if (visibleRange(); as range) { {{ range.start }} - {{ range.end }} } @else { Unknown }
```

--------------------------------

### NxDialogService.open()

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/modal/modal.md

Opens a modal dialog, either with a component or a predefined template. An optional configuration object can be passed to customize the modal's appearance and behavior. The method returns a reference to the opened modal.

```APIDOC
## NxDialogService.open(componentOrTemplateRef, config?)

### Description
Opens a modal dialog with the specified component or template, applying optional configuration settings.

### Method
open

### Parameters
#### Path Parameters
- No path parameters.

#### Query Parameters
- No query parameters.

#### Request Body
- **componentOrTemplateRef** (ComponentType<T> | TemplateRef<T>) - Required - The component or template to be rendered inside the modal.
- **config** (NxModalConfig) - Optional - An object to configure the modal's behavior and appearance.
  - **width** (string) - Optional - Sets the width of the modal dialog (e.g., '600px'). Default is '736px'.
  - **data** (any) - Optional - Data to be passed to the modal component.
  - **disableClose** (boolean) - Optional - If true, the modal will not close when clicking on the backdrop or pressing the ESC key. Default is false.
  - **closeIconButton** (boolean) - Optional - If true, a standard close button will be displayed in the modal header. Default is false.
  - **fullscreen** (boolean) - Optional - If true, the modal will be displayed in fullscreen, overriding width, height, maxWidth, and maxHeight properties. Default is false.

### Request Example
```ts
const myDialogData: MyDialogData = { /* some data */ };

const myDialogRef: NxModalRef<MyDialogComponent, MyDialogResult> = this.dialogService.open(MyDialogComponent, {
    width: '600px',
    data: myDialogData,
    disableClose: false,
    closeIconButton: true,
    fullscreen: false
});
```

### Response
#### Success Response (200)
- **NxModalRef<T, R>** (object) - A reference to the opened modal instance, which can be used to close the modal or subscribe to its events.

#### Response Example
```ts
// myDialogRef object
```
```

--------------------------------

### Complete A1 Migration Tracking in package.json (JSON)

Source: https://github.com/allianz/ng-aquila/blob/main/skills/a1-migration/SKILL.md

Update the `steps` array within the `a1Migration` key in `package.json` to reflect all completed migration steps.

```json
"a1Migration": {
  "skillVersion": "0.1.3",
  "appliedAt": "YYYY-MM-DD",
  "theme": "<spacious|compact|dense>",
  "steps": ["theme", "tiles", "info-icons", "layout", "small-stage"]
}
```

--------------------------------

### Track By with String Accessor in HTML

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/virtual-scroll/virtual-scroll.md

Optimizes rendering and height caching by tracking items using a property name string.

```html
<ng-container *nxVirtualFor="let item of items; trackBy: 'id'">
```

--------------------------------

### Menu component - anti-pattern with hidden APIs

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Example of a menu component that re-exposes button and tooltip APIs, creating maintenance burden and API bloat. This approach does not scale when underlying components add new features.

```html
<!-- 🚫 BAD EXAMPLE: don't do this -->
<nx-menu buttonSize="small" menuButtonType="primary" buttonText="Menu" (buttonClick)="buttonClicked()" tooltipText="Opens the menu" tooltipDelay="50">
    <nx-menu-item>Settings</nx-menu-item>
    <nx-menu-item>Remove</nx-menu-item>
</nx-menu>
```

--------------------------------

### Multi-Group Progress Stepper Template

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/examples/progress-stepper/progress-stepper-multi-groups/progress-stepper-multi-groups-example.html

Angular template using @for loops to render multiple stepper groups with steps, validation messages, and Previous/Next navigation buttons. Requires ng-aquila stepper components and form validation setup.

```html
@for (group of groups; track group) {
  @for (step of group.steps; track step) {
    Please fill out the field!

    Previous
    Next
  }
}
```

--------------------------------

### Register custom theme with an alternative base theme

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/theming/theming.md

Register a custom theme using `nx-register-theme` and specify an alternative base theme as the third argument. Ensure the desired base theme is imported first.

```scss
@import "@allianz/ng-aquila/styles/theming";
@import "@allianz/ng-aquila/styles/themes/your-base-theme";
...
$nx-themes: nx-register-theme($my-theme, themeName, baseThemeName);
```

--------------------------------

### Apply Allianz Theme with Theming API

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/ag-grid/ag-grid.md

For Allianz internal projects, import `themeAllianz` and apply it to the `[theme]` input of `ag-grid-angular` with the `theming-api-aquila` class.

```ts
import { themeAllianz } from '@allianz/ng-aquila/ag-grid';
```

```html
<ag-grid-angular
    class="theming-api-aquila"
    [theme]="themeAllianz"
></ag-grid-angular>
```

--------------------------------

### Panel Grow Configuration Display

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/documentation/examples/autocomplete/autocomplete-panel-grow/autocomplete-panel-grow-example.html

Template bindings showing panel growth state and maximum width settings. Displays the current panelGrow boolean value and panelMaxWidth constraint.

```html
Panel Grow: {{ modelPanelGrow }}
```

```html
Pabel Grow = true, Panel Max Width: {{ modelPanelMaxWidth }}
```

--------------------------------

### Component Input Best Practices for nx-icon

Source: https://github.com/allianz/ng-aquila/blob/main/DEVELOPER.md

Avoid using direct CSS property inputs; instead, prefer semantic options for component properties like size. Use CSS classes for styling.

```html
<nx-icon width="32" height="32" color="#123456"></nx-icon>
```

```html
<nx-icon size="small" class="my-color"></nx-icon>
```

--------------------------------

### Import NxTile Components

Source: https://github.com/allianz/ng-aquila/blob/main/skills/a1-migration/SKILL.md

Import these components when migrating from circle toggles to tiles. For standalone components, add them to the component's `imports` array.

```typescript
import { NxTileComponent, NxTileGroupComponent } from '@allianz/ng-aquila/tile';
```

--------------------------------

### Import and apply A1 design tokens with custom scope

Source: https://github.com/allianz/ng-aquila/blob/main/projects/ng-aquila/src/theming/theming.md

Manually import A1 design tokens and apply them using `a1-tokens.apply-design-tokens` before building an A1-based theme. This allows setting color scheme, animations, density, and a custom scope.

```scss
@use '@allianz/a1-design-tokens/dist/allianz/a1/web/tokens-theme-mixins-index' as a1-tokens;
@import '@allianz/ng-aquila/styles/theming';
@import "@allianz/ngx-brand-kit/scss/themes/allianz-one";


@include a1-tokens.apply-design-tokens('light', 'lively', 'spacious', '.my-custom-scope');
@include nx-build-theme(allianz-one, '.my-custom-scope');
```