/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.

Primary LanguageTypeScriptApache License 2.0Apache-2.0

REUSE status

UI5 Web Components for Angular

About this project

This is a wrapper around @ui5/webcomponents project to make it work with Angular without needing to use the CUSTOM_ELEMENTS_SCHEMA or 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 side.

Requirements and Setup

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

Installation

Via npm:

npm install @ui5/webcomponents-ngx

Via yarn:

yarn add @ui5/webcomponents-ngx

Usage

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

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 documentation.

Angular Forms

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

Versions

The table shows for each @ui5/webcomponents-ngx version:

  • the Angular compatible version
  • the @ui5/webcomponents compatible version
@ui5/webcomponents-ngx Angular @ui5/webcomponents
0.2 16 1.9.x
0.3.x 17 2.0.x

Support, Feedback, Contributing

For an overview on how this library works, see the SAP Contribution Guidelines, the Maintainers documentation.

This project is open to feature requests/suggestions, bug reports etc. via GitHub 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.

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 at all times.

Licensing

Copyright 2022 SAP SE or an SAP affiliate company and ui5-webcomponents-ngx contributors. Please see our LICENSE for copyright and license information. Detailed information including third-party components and their licensing/copyright information is available via the REUSE tool.