Step Input Examples

Different Step Configurations

@for (config of stepConfigurations(); track config.label) { {{ config.label }}: }

; beforeEach(() => { TestBed.configureTestingModule({ imports: [MyComponent] // Standalone component }); fixture = TestBed.createComponent(MyComponent); component = fixture.componentInstance; }); it('should create', () => { expect(component).toBeTruthy(); }); }); ``` -------------------------------- ### Install Individual Skills Source: https://github.com/sap/fundamental-ngx/blob/main/apps/docs/src/assets/skills/README.md Install specific skills by their IDs. You can install a single skill or multiple skills separated by commas. ```bash # Install only the scaffold skill npx skills add SAP/fundamental-ngx -s scaffold ``` ```bash # Install only migration and best-practices npx skills add SAP/fundamental-ngx -s migrate,best-practices ``` ```bash # Install all building skills npx skills add SAP/fundamental-ngx -s setup-project,scaffold,build-form,build-table,build-page-layout ``` -------------------------------- ### Playground Dialog Example Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/core/dialog/dialog-docs.component.html An example demonstrating a dialog playground with dynamic configuration display. ```html {{ dialogConfig | json }} @if (dialogConfig.allowFullScreen) { } This is the dialog playground body text! ``` -------------------------------- ### Install Dependencies Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/GETTING_STARTED.md Install project dependencies using Yarn. This is the first step before running the documentation app. ```bash # Install dependencies yarn install ``` -------------------------------- ### Install UI5 Web Components Fiori Source: https://github.com/sap/fundamental-ngx/blob/main/libs/ui5-webcomponents-fiori/README.md Install the necessary package using npm. ```bash npm install @fundamental-ngx/ui5-webcomponents-fiori ``` -------------------------------- ### Install fundamental-ngx Skills Source: https://github.com/sap/fundamental-ngx/blob/main/apps/docs/src/assets/skills/README.md Use this command to install the fundamental-ngx skills into your project. Choose between a project-level installation or a global installation for wider availability. ```bash npx skills add SAP/fundamental-ngx ``` ```bash npx skills add SAP/fundamental-ngx -g ``` -------------------------------- ### Micro Process Flow Status Indicator Example Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/core/micro-process-flow/examples/micro-process-flow-other-controls-example.component.html Demonstrates how to use a status indicator within the micro process flow. No specific setup is required beyond including the component. ```html

``` -------------------------------- ### Verify Installed Skills Source: https://github.com/sap/fundamental-ngx/blob/main/apps/docs/src/assets/skills/README.md List the skills that have been installed, either locally within the project or globally. This helps confirm successful installation. ```bash # List installed skills npx skills list ``` ```bash # Or list global skills npx skills list -g ``` -------------------------------- ### KPITile Example Source: https://github.com/sap/fundamental-ngx/wiki/Platform:-Tile-Component-Technical-Design Implement a KPITile using this example. It showcases various properties for KPI display, trend, state, and units, along with event binding. ```html [width]="2" [title]="'KPI Tile'" [subtitle]="'Subtitle'" [kpi]="144" [trend]="up|down|neutral" [state]="positive|negative|critical|neutral" [unit]="MB" (tileClick)="onTileClick()"> footer content ``` -------------------------------- ### Install Dependencies with Yarn Source: https://github.com/sap/fundamental-ngx/blob/main/CONTRIBUTING.md Use 'yarn' to install project dependencies. This is the recommended method to ensure correct versions are installed. ```bash yarn ``` -------------------------------- ### Install Moment Adapter and Moment.js Source: https://github.com/sap/fundamental-ngx/blob/main/libs/moment-adapter/README.md Install the adapter and Moment.js, ensuring the adapter version matches your @fundamental-ngx/core version to avoid peer dependency conflicts. ```bash npm install @fundamental-ngx/moment-adapter@ moment ``` -------------------------------- ### Install Day.js Adapter Packages Source: https://github.com/sap/fundamental-ngx/blob/main/libs/moment-adapter/README.md Uninstall the Moment.js adapter and install the Day.js adapter and dayjs package using npm. ```bash npm uninstall @fundamental-ngx/moment-adapter moment npm install @fundamental-ngx/datetime-adapter dayjs ``` -------------------------------- ### Manual Install: Add Theming Assets Source: https://github.com/sap/fundamental-ngx/blob/main/README.md Configure assets in angular.json for theming, including CSS variables and fonts, for manual installations. ```json { "glob": "**/css_variables.css", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/", "output": "./assets/theming-base/" }, { "glob": "**/*", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/", "output": "./assets/theming-base/baseTheme/fonts/" }, { "glob": "**/*", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/", "output": "./assets/theming-base/sap_horizon/fonts/" }, { "glob": "**/*", "input": "./node_modules/fundamental-styles/dist/theming/", "output": "./assets/fundamental-styles-theming/" } ``` -------------------------------- ### Test Specific Library Example 2 Source: https://github.com/sap/fundamental-ngx/blob/main/AGENTS.md Example of running tests for the 'core' library, specifically targeting the 'button.component.spec.ts' file. ```bash nx run core:test --testfile=button.component.spec.ts ``` -------------------------------- ### Start Specific Package Docs App Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/GETTING_STARTED.md Start the documentation app for a specific package using Nx. This is useful for focused development. ```bash # Start with a specific package only npx nx serve docs --configuration=core ``` -------------------------------- ### Accessibility Examples Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/ui5-webcomponents/button/examples/button-sample.html Provides examples focused on ensuring button accessibility for all users. ```html Options ``` -------------------------------- ### Generic Tag Docs Module Setup Source: https://github.com/sap/fundamental-ngx/wiki/Create-a-new-Component-in-Fundamental‐NGX This is the minimum setup for the `generic-tag-docs.module.ts`, including routes, imports, declarations, and providers for the component documentation. ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ApiComponent, currentComponentProvider, SharedDocumentationPageModule } from '@fundamental-ngx/docs/shared'; import { API_FILES } from '@fundamental-ngx/docs/core/shared'; import { GenericTagModule } from '@fundamental-ngx/core/generic-tag'; import { GenericTagDocsComponent } from './generic-tag-docs.component'; import { GenericTagHeaderComponent } from './generic-tag-header/generic-tag-header.component'; const routes: Routes = [ { path: '', component: GenericTagHeaderComponent, children: [ { path: '', component: GenericTagDocsComponent }, { path: 'api', component: ApiComponent, data: { content: API_FILES.genericTag } } ] } ]; @NgModule({ imports: [RouterModule.forChild(routes), SharedDocumentationPageModule, GenericTagModule], exports: [RouterModule], declarations: [ GenericTagDocsComponent, GenericTagHeaderComponent, ], providers: [currentComponentProvider('generic-tag')] }) export class GenericTagDocsModule {} ``` -------------------------------- ### Install UI5 Web Components AI Source: https://github.com/sap/fundamental-ngx/blob/main/libs/ui5-webcomponents-ai/README.md Install the AI components package using npm. ```bash npm install @fundamental-ngx/ui5-webcomponents-ai ``` -------------------------------- ### Test Specific Library Example Source: https://github.com/sap/fundamental-ngx/blob/main/AGENTS.md Example of running tests for the 'cdk' library, specifically targeting the 'line-clamp.directive.spec.ts' file. ```bash nx run cdk:test --testfile=line-clamp.directive.spec.ts ``` -------------------------------- ### Install Dependencies Source: https://github.com/sap/fundamental-ngx/wiki/Releasing-Backward-Versions---Below-0.24 After adding the local package, run `npm i` to install all project dependencies, including the newly added local package. ```bash npm i ``` -------------------------------- ### Manual Install: Add Assets to angular.json Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/GETTING_STARTED.md For manual installations, configure the assets array in `angular.json` to include theming-related files. ```json { "glob": "**/css_variables.css", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/", "output": "./assets/theming-base/" }, { "glob": "**/*", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/", "output": "./assets/theming-base/baseTheme/fonts/" }, { "glob": "**/*", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/", "output": "./assets/theming-base/sap_horizon/fonts/" }, { "glob": "**/*", "input": "./node_modules/fundamental-styles/dist/theming/", "output": "./assets/fundamental-styles-theming/" } ``` -------------------------------- ### Example: Generate Rating Indicator Component Source: https://github.com/sap/fundamental-ngx/blob/main/NEW_COMPONENT.md This example demonstrates how to use the generator to create a 'rating-indicator' component within the 'core' library. ```bash nx g @fundamental-ngx/nx-plugin:sap-component --name=rating-indicator --project=core ``` -------------------------------- ### Example Query: List components in core library Source: https://github.com/sap/fundamental-ngx/blob/main/libs/mcp-server/README.md Demonstrates using list_components to find components within a specific library. ```text "What components are available in the core library?" → list_components with library "core" ``` -------------------------------- ### Basic Shellbar Example Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/core/shellbar/shellbar-docs.component.html Demonstrates the minimum configuration for a Shellbar with a single application product, user settings, and a collapsible menu. It shows how to display user initials if a thumbnail is not available. ```html

``` -------------------------------- ### Example Query: Recommend components for data table Source: https://github.com/sap/fundamental-ngx/blob/main/libs/mcp-server/README.md Demonstrates using recommend_components with a descriptive query for complex UI needs. ```text "I need to build a filterable data table with pagination" → recommend_components with description "filterable data table with pagination" ``` -------------------------------- ### Typed Custom Events with UI5WrapperCustomEvent Source: https://github.com/sap/fundamental-ngx/blob/main/libs/ui5-webcomponents-base/README.md Use UI5WrapperCustomEvent to get strongly-typed payloads from UI5 wrapper component outputs. This example shows how to get the event payload type for the 'click' output of ButtonComponent. ```typescript import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base'; import { ButtonComponent } from '@fundamental-ngx/ui5-webcomponents'; // Get the event payload type for the "click" output of ButtonComponent type ClickEvent = UI5WrapperCustomEvent; ``` -------------------------------- ### Execute Skill Commands Source: https://github.com/sap/fundamental-ngx/blob/main/apps/docs/src/assets/skills/README.md After installation, you can execute skills directly within Claude Code by typing their command prefix, typically starting with '/'. ```bash /scaffold ``` ```bash /build-form ``` ```bash /migrate ``` -------------------------------- ### Prepare Project with Yarn Source: https://github.com/sap/fundamental-ngx/blob/main/CONTRIBUTING.md Run 'yarn prepare' to set up the project environment after installing dependencies. ```bash yarn prepare ``` -------------------------------- ### Add @fundamental-ngx/cdk to Project Source: https://github.com/sap/fundamental-ngx/blob/main/libs/cdk/README.md Use the Angular CLI to add the @fundamental-ngx/cdk package to your project. This command installs the package and performs necessary setup. ```bash ng add @fundamental-ngx/cdk ``` -------------------------------- ### Examples of Running Specific Test Files Source: https://github.com/sap/fundamental-ngx/blob/main/docs/agents/testing-guidelines.md Demonstrates how to run specific test files for cdk, core, and platform libraries. ```bash nx run cdk:test --testfile=line-clamp.directive.spec.ts ``` ```bash nx run core:test --testfile=button.component.spec.ts ``` ```bash nx run platform:test --testfile=table.component.spec.ts ``` -------------------------------- ### Create Release Branch Source: https://github.com/sap/fundamental-ngx/wiki/Releasing-Backward-Versions---Below-0.24 Create a new branch from the current tag to start the release process. For example, create a branch named `release/0.15.3` from `v0.15.2`. ```bash git checkout -b release/0.15.3 ``` -------------------------------- ### MCP Server Tool: get_component_examples Source: https://github.com/sap/fundamental-ngx/blob/main/libs/mcp-server/README.md Use to fetch usage examples for a component from the documentation application. ```json { "name": "fd-dialog" } ``` -------------------------------- ### Footer Toolbar Component with i18n Support Source: https://github.com/sap/fundamental-ngx/wiki/Platform:-Footer-Toolbar-Component-V1.0-Technical-Design Example of using the fdp-footer-toolbar component with internationalization (i18n) for the title attribute. Ensure i18n setup is complete. ```html ``` -------------------------------- ### Build and Package Library Source: https://github.com/sap/fundamental-ngx/wiki/Releasing-Backward-Versions-Above-0.24 Run this command to build the library and create a .tgz file for testing. The version in the filename will correspond to the current project version. ```bash npm run build-pack-library ``` -------------------------------- ### Default Color Palette Popover Example Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/ui5-webcomponents/color-palette-popover/examples/default-color.html Demonstrates the basic setup of a Color Palette Popover, including how to display a default selected color. This snippet is useful for initializing the component with a predefined color. ```html

Select Color

``` -------------------------------- ### Layout Grid with Offset (Size 2, Offset 2) Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/core/layout-grid/examples/layout-grid-offset-example.component.html This example shows a layout grid item with a size of 2 and an offset of 2. Adjust offset values to modify the starting position of the column. ```html

``` -------------------------------- ### Date Picker Range Disabled Example Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/core/date-picker/examples/date-picker-range-disabled-example/date-picker-range-disabled-example.component.html Displays the touched, dirty, and valid states of a date range form control, along with the selected start and end dates. This snippet is useful for understanding form control states in a date range picker. ```html @if (customForm) { Touched: {{ customForm.controls.dates.touched }} Dirty: {{ customForm.controls.dates.dirty }} Valid: {{ customForm.controls.dates.valid }} Range Start Date: {{ customForm.controls.dates.value?.start?.toDateString() || 'null' }} Range End Date: {{ customForm.controls.dates.value?.end?.toDateString() || 'null' }} } ``` -------------------------------- ### Basic Value Help Dialog Setup Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/platform/vhd/platform-vhd.docs.component.html Demonstrates the basic call to the Value Help Dialog component. Ensure `[dialogTitle]`, `[uniqueKey]`, `[tokenViewField]` or `[tokenizerFn]`, and `[dataSource]` are set. ```html ``` -------------------------------- ### Install Dependencies Source: https://github.com/sap/fundamental-ngx/wiki/Run-e2e-tests-on-your-local-environment Installs project dependencies using npm ci. This command ensures a clean installation based on the package-lock.json. ```bash npm ci ``` -------------------------------- ### Serve Projects with NX Source: https://github.com/sap/fundamental-ngx/blob/main/docs/agents/nx-workflow.md Commands for serving the documentation app, either via yarn start or NX. ```bash # Serve the documentation app yarn start ``` ```bash # Or using NX nx serve docs ``` -------------------------------- ### Documenting a Directive with Usage Example Source: https://github.com/sap/fundamental-ngx/wiki/Documenting-Code Directives with minimal content require a code example. This example documents a modal title directive. ```typescript /** * Directive that applies fundamental modal styling to a header. * * ```html *

Modal Title

* ``` */ @Directive({ selector: '[fd-modal-title]' }) export class ModalTitleDirective { ... ... } ``` -------------------------------- ### Install fundamental-ngx/platform without angular-cli Source: https://github.com/sap/fundamental-ngx/wiki/Full-Installation-Guide Use this command to install the fundamental-ngx/platform library directly using npm. For versions prior to 0.10, use 'npm install fundamental-ngx'. ```bash npm install @fundamental-ngx/platform // For versions prior to 0.10 use fundamental-ngx: // (npm install fundamental-ngx) ``` -------------------------------- ### Install lodash-es with yarn Source: https://github.com/sap/fundamental-ngx/wiki/Full-Installation-Guide Install the lodash-es library using yarn. ```bash yarn add lodash-es ``` -------------------------------- ### Example Query: Compare fd-table and fdp-table Source: https://github.com/sap/fundamental-ngx/blob/main/libs/mcp-server/README.md Demonstrates using compare_components to understand differences between two similar components. ```text "What is the difference between fd-table and fdp-table?" → compare_components with component_a "fd-table", component_b "fdp-table" ``` -------------------------------- ### Step-by-Step Stable Release via CLI Source: https://github.com/sap/fundamental-ngx/blob/main/docs/README.md Execute these commands sequentially for a more controlled stable release process: version bumping, building packages, and publishing to npm. ```bash # 1. Version bump npx nx release version # 2. Build packages npx nx run-many --target=build --all # 3. Publish to npm npx nx release publish ``` -------------------------------- ### Install lodash-es with npm Source: https://github.com/sap/fundamental-ngx/wiki/Full-Installation-Guide Install the lodash-es library using npm. ```bash npm i lodash-es ``` -------------------------------- ### StackBlitz Example File Configuration Source: https://github.com/sap/fundamental-ngx/blob/main/docs/README.md Configure `ExampleFile` with `originalFileName` to ensure StackBlitz projects match example filenames. This is crucial for accurate file generation in the interactive IDE. ```typescript examples: ExampleFile[] = [ { language: 'html', code: getAssetFromModuleAssets('button-sample.html'), fileName: 'button-example', // Display name in docs originalFileName: 'button-sample' // Actual filename for StackBlitz }, { language: 'typescript', component: 'ButtonExample', code: getAssetFromModuleAssets('button-sample.ts'), fileName: 'button-example', originalFileName: 'button-sample' } ]; ``` -------------------------------- ### Example Commit Message: Docs Source: https://github.com/sap/fundamental-ngx/wiki/wip:-Contribute An example of a commit message for documentation changes. ```text docs(changelog): update changelog to beta.5 ``` -------------------------------- ### PR Title Chore Example Source: https://github.com/sap/fundamental-ngx/blob/main/CONTRIBUTING.md Example of a chore type PR title. ```text chore: updated package.json ``` -------------------------------- ### PR Title Type Example Source: https://github.com/sap/fundamental-ngx/blob/main/CONTRIBUTING.md Example of a feature type PR title. ```text feat: my adding new binding to button component ``` -------------------------------- ### UI5 List Selection Modes Example Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/ui5-webcomponents/list/examples/selection-modes.html Demonstrates how to iterate through available selection modes and display their labels. Also shows how to display selected items and iterate through a list of countries. ```html List Selection Modes

Item 1

Item 2

Item 3

``` -------------------------------- ### Basic Carousel Setup Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/ui5-webcomponents/carousel/carousel-docs.html Demonstrates the fundamental structure for implementing a carousel with basic navigation. ```html

Slide 1

Slide 2

Slide 3

``` -------------------------------- ### Browse Available Skills Source: https://github.com/sap/fundamental-ngx/blob/main/apps/docs/src/assets/skills/README.md Before installing, preview the skills available for the SAP/fundamental-ngx package using this command. ```bash npx skills add SAP/fundamental-ngx -l ``` -------------------------------- ### Breaking Change Commit Example Source: https://github.com/sap/fundamental-ngx/blob/main/AGENTS.md Example of a commit message indicating a breaking change. ```markdown fix(core)!: remove deprecated API BREAKING CHANGE: DestroyedService removed. Use DestroyRef + takeUntilDestroyed(). ``` -------------------------------- ### Fixed Panel Example Source: https://github.com/sap/fundamental-ngx/blob/main/libs/docs/ui5-webcomponents/panel/examples/fixed-panel.html Demonstrates how to create a panel with fixed content that remains visible. ```html

Critical system information that should always be visible. @for (info of importantInfo; track info.label) { {{ info.label }} {{ info.value }} }