sap-samples / ui5-webcomponents-sample-angular

UI5 Web Components Sample TODO application built with Angular.

UI5 Web Components Angular Sample Application

Angular sample application to demonstrate the usage of the UI5 Web Components. It shows how to bind properties, to subscribe to events, using nested components and the bootstrapped Angular build.

This project was bootstrapped with Angular CLI.

Prerequisites

• Node.js (version 8.5 or higher ⚠️)

Getting started

1. Clone this repository using the GitHub Command line tool and navigate into the downloaded directory.

   git clone https://github.com/SAP-samples/ui5-webcomponents-sample-angular.git
   cd ui5-webcomponents-sample-angular

2. Install all dependencies

   npm install

3. Start a local server and run the application. (The running application can be found here: http://localhost:4200)

   npm start

Browser support

Currently Chrome, Safari, Edge and Firefox support Web Components natively.

Noteworthy

Consume UI5 Web Components

Import the desired component(s) in your app to define the UI5 Web Component.

For example, to use ui5-button you need to import it:

import "@ui5/webcomponents/dist/Button"; // loads ui5-button

Then, you can use the custom element in an HTML page:

<ui5-button>Hello world!</ui5-button>

Configure events

A custom configuration for UI5 Web Components should be provided in the html:

<script data-id="sap-ui-config" type="application/json">
  {
    "xx-wc-no-conflict": {
      "events": "press"
    }
  }
</script>

Than press event for ui5-button, ui5-togglebutton, ui5-icon and ui5-link should be attached with (ui5-click) instead of (click)

Configure Angular Build

When UI5 Web Components are used they include all of their translation files and CLDR data files in the application bundle. In order to decrease the bundle size of the application a custom Webpack configuration should be provided.

You can follow the steps described by this article.

The content of the webpack.partial.js file should be:

webpack.partial.js

module.exports = {
    module: {
      rules: [
        {
          test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/],
          loader: 'file-loader',
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
          type: 'javascript/auto'
        }
      ]
    }
};

Where is the npm package?

• UI5 Web Components

Limitations

No limitations known.

Known Issues

No major bugs known.

Support

We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents channel of the OpenUI5 Community Slack.

Contribute to UI5 Web Components

Please check our Contribution Guidelines.

ui5-webcomponents-sample-angular's Issues

ui5-toolbar is removed from the components library but is still used

After 0.10.0 the ui5-toolbar is removed. However, the dialog still uses it

[rl-license_file-2] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-license_file-2
Explanation: Does it use an allowed license? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

[rl-reuse_tool-4] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-4
Explanation: Is it compliant with REUSE rules? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Edit dialog doesn't open

There's a bug in app.component.ts, line #81 where this.oDialog.nativeElement.open() is called. It should be .show() instead of open().

Upgrade to latest UI5 Web Components version

Failing to compile with default

Following the instructions, however when building using npm start

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@ui5/webcomponents-base/dist/features/browsersupport/Edge' in '/Users/Documents/sap/upscale/ui5-webcomponents-sample-angular/src/app'
ℹ ｢wdm｣: Failed to compile.

Remarking out the following line in app.module.ts, allows compile:
// import "@ui5/webcomponents-base/dist/features/browsersupport/Edge";

Maybe just update the documentation or have it commented out by default and those that use Microsoft Browsers can enable.

[rl-vulnerability_alerts-1] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-vulnerability_alerts-1
Explanation: Are vulnerability alerts enabled? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

IE11 Browser Support Showcase

Add a Webpack configuration for IE11 support

Two way binding support for Angular

Hi folks,

do you plan to support two way binding for all components?

Best regards,
Novak

Two-way data binding

Thank you for all three sample apps (angular, react, vue), really helpful in evaluations and discussions,

Would it be possible to extend all three apps, with the two-way binding, even the simplest way?

Like for example: two text fields and one checkbox, which can be edited in UI, for view to model changes.
And one button, with the click logic to swap the text fields’ bound data values and toggle the checkbox bound data value, for model to view changes?

The reason I am asking is that two-way binding looks like a kind of challenge.

Angular tutorial

You can use two-way data binding with the following components: CheckBox, RadioButton, Input, DatePicker, Switch, TextArea. In order to use it, you have to use a library called Origami ...

React tutorial

Data binding not mentioned at all, only event binding. There are more possibilities in React, one could be shown as example.

Vue tutorial

v-model binding doesn’t work as expected for custom elements. In order to use two way data binding, you should bind and update the value yourself like this

<ui5-input
    :value="inputValue"
    @input="inputValue = $event.target.value">
</ui5-input>