https://github.com/sap/ui5-webcomponents-ngx
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.
https://github.com/sap/ui5-webcomponents-ngx
angular open-source typescript ui-components web-components
Last synced: 27 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/sap/ui5-webcomponents-ngx
- Owner: SAP
- License: apache-2.0
- Created: 2022-12-13T16:32:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-26T13:25:51.000Z (about 1 year ago)
- Last Synced: 2025-03-30T15:09:32.087Z (about 1 year ago)
- Topics: angular, open-source, typescript, ui-components, web-components
- Language: TypeScript
- Homepage: https://ui5-webcomponents-ngx.netlify.app/
- Size: 12.7 MB
- Stars: 29
- Watchers: 3
- Forks: 6
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# UI5 Web Components for Angular
## 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. ``, ``).
UI5 interprets such tags as custom elements and may wait **up to 1 second** for their registration, causing delayed rendering inside components like ``.
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).