Package Exports

@fundamental-ngx/ui5-webcomponents-base
@fundamental-ngx/ui5-webcomponents-base/i18n
@fundamental-ngx/ui5-webcomponents-base/package.json
@fundamental-ngx/ui5-webcomponents-base/theming
@fundamental-ngx/ui5-webcomponents-base/theming-bridge
@fundamental-ngx/ui5-webcomponents-base/types

Readme

@fundamental-ngx/ui5-webcomponents-base

Base utilities and types shared across all @fundamental-ngx/ui5-webcomponents-* packages.

Overview

This library provides the shared infrastructure used by the Angular wrappers for UI5 Web Components. It is installed automatically as a peer dependency of @fundamental-ngx/ui5-webcomponents, @fundamental-ngx/ui5-webcomponents-fiori, and @fundamental-ngx/ui5-webcomponents-ai.

What's included:

Re-exported UI5 Web Components type enums (ValueState, CalendarType, AnimationMode, etc.)
UI5WrapperCustomEvent<T, N> — TypeScript helper for typed custom event payloads from wrapper components
Theming API (provideUi5Theming, Ui5ThemingProvider) for SAP theming integration
Language bridge (provideUi5LanguageBridge) — syncs Fundamental NGX locale to UI5 Web Components

Installation

This package is installed automatically as a dependency of the UI5 wrapper libraries:

npm install @fundamental-ngx/ui5-webcomponents

If you need it standalone:

npm install @fundamental-ngx/ui5-webcomponents-base

Usage

Typed custom events

Use UI5WrapperCustomEvent<T, N> to get the strongly-typed payload of a UI5 wrapper output:

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<ButtonComponent, 'ui5Click'>;

Re-exported UI5 types

Common UI5 enums are re-exported so you don't need to import from @ui5/webcomponents-base directly:

import { ValueState, CalendarType, AnimationMode } from '@fundamental-ngx/ui5-webcomponents-base';

Language bridge

The language bridge keeps UI5 Web Components in sync with the Fundamental NGX locale signal. Add it once in your root providers:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideUi5LanguageBridge } from '@fundamental-ngx/ui5-webcomponents-base/i18n';

export const appConfig: ApplicationConfig = {
    providers: [provideUi5LanguageBridge()],
};

After this, changing the FD_LANGUAGE_SIGNAL will automatically update the locale used by UI5 Web Components.

JSPM