ui5-webcomponents-ngx

KO | EN

gitlite — search

#python #ai #llm #android #machine-learning #rust #linux #docker #nodejs #macos #java #vue #pytorch #ios

ui5-webcomponents-ngx

(★ 39)

UI5 Web Components for Angular provides directives for each UI5 Web Component. The directives allow to easily build your Angular application following the SAP Design System.

ui5-webcomponents-ngx Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# UI5 Web Components for Angular

> [!WARNING]
> **This library is deprecated and no longer actively maintained.**
> Please migrate to the Angular web component wrappers available in [Fundamental NGX](https://sap.github.io/fundamental-ngx/#/home), which provide the actively maintained SAP alternative.

## About this project

This is a wrapper around [@ui5/webcomponents](https://sap.github.io/ui5-webcomponents) project to make it work with
Angular without
needing to use the [CUSTOM_ELEMENTS_SCHEMA](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA)
or [NO_ERRORS_SCHEMA](https://angular.io/api/core/NO_ERRORS_SCHEMA) schemas,
while providing full type safety and access to underlying web components in a type safe environment.
Everything that works and is available on the [@ui5/webcomponents](https://sap.github.io/ui5-webcomponents) side.

## Requirements and Setup

* Angular 16 or higher. Other versions will not work because of the new Angular `required` inputs feature.

### Installation

Via npm:

```bash
npm install @ui5/webcomponents-ngx
```

Via yarn:

```bash
yarn add @ui5/webcomponents-ngx
```

### Usage

Import the module in your `app.module.ts` file:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; // here it is

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Ui5WebcomponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

And that is it, you can now use any component described in
the [@ui5/webcomponents](https://sap.github.io/ui5-webcomponents)
documentation.

### Using Angular Components Inside UI5 Components

Angular components often use selectors with hyphens (e.g. `<app-item>`, `<app-value>`).
UI5 interprets such tags as custom elements and may wait **up to 1 second** for their registration, causing delayed rendering inside components like `<ui5-table-cell>`.

To avoid this, configure UI5 to ignore Angular component prefixes:

```ts
// ui5-init.ts
import { ignoreCustomElements } from '@ui5/webcomponents-base/dist/IgnoreCustomElements.js';

ignoreCustomElements('app-');
```

Import it before Angular bootstraps:
```ts
// main.ts
import './ui5-init';
```

This prevents unnecessary waiting, ensures smooth rendering, and improves performance when mixing Angular components with UI5 Web Components.

### Angular Forms

Every form-capable component can be used with Angular's native form approaches. Meaning all the
`formControlName` and `ngModel`s will work as expected.

## Versions

Angular Versions Support: Our versions offer Angular support. More information can be found [here](https://github.com/SAP/ui5-webcomponents-ngx/wiki/Angular-Versions-Support).

## Support, Feedback, Contributing

For an overview on how this library works, see the [SAP Contribution Guidelines](https://github.com/SAP/.github/blob/main/CONTRIBUTING.md), the [Maintainers](https://github.com/SAP/ui5-webcomponents-ngx/blob/main/MAINTAINERS.md) documentation.

This project is open to feature requests/suggestions, bug reports etc.
via [GitHub issues](https://github.com/SAP/ui5-webcomponents-ngx/issues). Contribution and feedback are encouraged and
always welcome. For more information about how to contribute, the project structure, as well as additional contribution
information, see our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents-ngx/blob/main/CONTRIBUTING.md).

## Code of Conduct

We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for
everyone. By participating in this project, you agree to abide by
its [Code of Conduct](https://github.com/SAP/ui5-webcomponents-ngx/blob/main/CODE_OF_CONDUCT.md) at all times.

## Licensing

Copyright 2022 SAP SE or an SAP affiliate company and ui5-webcomponents-ngx contributors. Please see
our [LICENSE](https://github.com/SAP/ui5-webcomponents-ngx/blob/main/LICENSES/Apache-2.0.txt) for copyright and license
information. Detailed information including third-party components and their licensing/copyright information is
available [via the REUSE tool](https://api.reuse.software/info/github.com/SAP/ui5-webcomponents-ngx).

ui5-webcomponents-ngx

ui5-webcomponents-ngx Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ui5-webcomponents-ngx

ui5-webcomponents-ngx Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README