{"id":20484812,"url":"https://github.com/sap-samples/ui5-webcomponents-sample-angular","last_synced_at":"2025-04-13T14:52:31.807Z","repository":{"id":37795126,"uuid":"170030546","full_name":"SAP-samples/ui5-webcomponents-sample-angular","owner":"SAP-samples","description":"UI5 Web Components Sample TODO application built with Angular.","archived":false,"fork":false,"pushed_at":"2025-03-07T12:55:16.000Z","size":8302,"stargazers_count":39,"open_issues_count":16,"forks_count":13,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-13T09:48:26.913Z","etag":null,"topics":["angularjs","sample","sample-code","ui5","ui5-webcomponents"],"latest_commit_sha":null,"homepage":"https://sap-samples.github.io/ui5-webcomponents-sample-angular/ ","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SAP-samples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-10T21:41:05.000Z","updated_at":"2025-04-04T03:38:17.000Z","dependencies_parsed_at":"2024-11-15T16:41:44.466Z","dependency_job_id":null,"html_url":"https://github.com/SAP-samples/ui5-webcomponents-sample-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-webcomponents-sample-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-webcomponents-sample-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-webcomponents-sample-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-webcomponents-sample-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAP-samples","download_url":"https://codeload.github.com/SAP-samples/ui5-webcomponents-sample-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248732509,"owners_count":21152851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","sample","sample-code","ui5","ui5-webcomponents"],"created_at":"2024-11-15T16:25:52.262Z","updated_at":"2025-04-13T14:52:31.780Z","avatar_url":"https://github.com/SAP-samples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![UI5 logo](/docs/images/UI5_logo_wide.png)\n[![CI](https://github.com/SAP-samples/ui5-webcomponents-sample-angular/actions/workflows/ci.yaml/badge.svg)](https://github.com/SAP-samples/ui5-webcomponents-sample-angular/actions/workflows/ci.yaml)\n[![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/ui5-webcomponents-sample-angular)](https://api.reuse.software/info/github.com/SAP-samples/ui5-webcomponents-sample-angular)\n\n# UI5 Web Components Angular Sample Application\n\n[Angular]( https://angular.io/) sample application to demonstrate the usage of the [UI5 Web Components]( https://github.com/SAP/ui5-webcomponents). It shows how to bind properties, to subscribe to events, using nested components and the bootstrapped Angular build.\n \nThis project was bootstrapped with [Angular CLI](https://cli.angular.io/).\n \n## Prerequisites\n- [Node.js](https://nodejs.org/) (**version 8.5 or higher** ⚠️)\n\n## Getting started\n1. [Clone this repository](https://help.github.com/articles/cloning-a-repository/) using the [GitHub Command line tool](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and navigate into the downloaded directory.\n    ```sh\n    git clone https://github.com/SAP-samples/ui5-webcomponents-sample-angular.git\n    cd ui5-webcomponents-sample-angular\n    ```\n1. Install all dependencies\n    ```sh\n    npm install\n    ```\n\n1. Start a local server and run the application. (The running application can be found here:  http://localhost:4200)\n    ```sh\n    npm start\n    ```\n\n## Browser support\n\nCurrently Chrome, Safari, Edge and Firefox support Web Components natively.\n\n## Noteworthy\n \n### Consume UI5 Web Components\nImport the desired component(s) in your app to define the UI5 Web Component.\n \nFor example, to use ```ui5-button``` you need to import it:\n \n```js\nimport \"@ui5/webcomponents/dist/Button\"; // loads ui5-button\n```\n \nThen, you can use the custom element in an HTML page:\n \n```html\n\u003cui5-button\u003eHello world!\u003c/ui5-button\u003e\n```\n \n### Configure events\nA custom configuration for UI5 Web Components should be provided in the html:\n \n```html\n\u003cscript data-id=\"sap-ui-config\" type=\"application/json\"\u003e\n  {\n    \"xx-wc-no-conflict\": {\n      \"events\": \"press\"\n    }\n  }\n\u003c/script\u003e\n```\n \nThan press event for ```ui5-button```, ```ui5-togglebutton```, ```ui5-icon``` and ```ui5-link``` should be attached with ```(ui5-click)``` instead of ```(click)```\n \n### Configure Angular Build\nWhen UI5 Web Components are used they include all of their translation files and CLDR data files in the application bundle.\nIn order to decrease the bundle size of the application a custom Webpack configuration should be provided. \n\nYou can follow the steps described by [this article](https://github.com/manfredsteyer/ngx-build-plus#getting-started).\n \nThe content of the ```webpack.partial.js``` file should be:\n \n**webpack.partial.js**\n```js\nmodule.exports = {\n    module: {\n      rules: [\n        {\n          test: [/cldr\\/.*\\.json$/, /i18n\\/.*\\.json$/],\n          loader: 'file-loader',\n          options: {\n            name: 'static/media/[name].[hash:8].[ext]',\n          },\n          type: 'javascript/auto'\n        }\n      ]\n    }\n};\n```\n\n### Where is the npm package?\n- [UI5 Web Components](https://www.npmjs.com/package/@ui5/webcomponents)\n\n## Limitations\nNo limitations known.\n\n## Known Issues\nNo major bugs known.\n\n## Support\nWe welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).\n\n## Contribute to UI5 Web Components\nPlease check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/CONTRIBUTING.md).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsap-samples%2Fui5-webcomponents-sample-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsap-samples%2Fui5-webcomponents-sample-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsap-samples%2Fui5-webcomponents-sample-angular/lists"}