{"id":19426686,"url":"https://github.com/mainawycliffe/gdg-devfest19-demo","last_synced_at":"2026-04-13T17:07:10.558Z","repository":{"id":124922126,"uuid":"219074824","full_name":"mainawycliffe/gdg-devfest19-demo","owner":"mainawycliffe","description":"This is a demo for Angular Elements for a talk I gave at Devfest Rift Valley 2019. The talk title was Rich Web Components Using Angular Elements.","archived":false,"fork":false,"pushed_at":"2020-06-07T11:15:28.000Z","size":631,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-07T19:38:52.200Z","etag":null,"topics":["angular","angularelements","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mainawycliffe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-11-01T22:59:52.000Z","updated_at":"2019-11-03T05:14:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"d624ef7a-a3cd-48ab-8a44-90c5c821452e","html_url":"https://github.com/mainawycliffe/gdg-devfest19-demo","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/mainawycliffe%2Fgdg-devfest19-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mainawycliffe%2Fgdg-devfest19-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mainawycliffe%2Fgdg-devfest19-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mainawycliffe%2Fgdg-devfest19-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mainawycliffe","download_url":"https://codeload.github.com/mainawycliffe/gdg-devfest19-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240605840,"owners_count":19827985,"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":["angular","angularelements","webcomponents"],"created_at":"2024-11-10T14:08:37.779Z","updated_at":"2026-04-13T17:07:10.527Z","avatar_url":"https://github.com/mainawycliffe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Todo Angular Elements (Web Components) Demo for GDG Devfest Rift Valley 2019\n\nThis is a demo for Angular Elements for a talk I gave at Devfest Rift Valley 2019.  The talk title was **Rich Web Components Using Angular Elements**.\n\n## Demo\n\nYou can play with the demo for this well, demo, [here](https://mainawycliffe.github.io/gdg-devfest19-demo/).\n\n## Building this Demo\n\n```shell\n\nng build --prod\n\n```\n\nYou can skip the `--output-hashing` flag as I have set it permanently to none inside `angular.json`.\n\nAfter building is complete, you can use Node to run the `concat.js` script which combines the build artifacts into a single JS Script essay to use with your index.html.\n\n```shell\n\nnode concat.js\n\n```\n\n\u003e I will share more scripts for achieving the same, from different scripting languages such as bash.\n\nIf you use the `concat.js` to concat the files, the three final artifacts will be put inside the `output` dir at root of this project.\n\n## Using the Web Components\n\nYou can then use the web components as follows inside any HTML.\n\nFirst, Import the the three build artifacts into you HTML File.\n\n  Inside Header, Import the CSS:\n\n  ```html\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"./styles.css\"\u003e\n  \u003c/head\u003e\n  ```\n\n  And then, inside the body, just next to the body closing tags import the JS:\n\n  ```html\n  \u003cscript src=\"./ng-es5.js\" nomodule\u003e\u003c/script\u003e \u003c!-- ES5 Import --\u003e\n  \u003cscript src=\"./ng-es2015.js\" type=\"module\"\u003e\u003c/script\u003e \u003c!-- ES2015 Import (Smaller Bundle) --\u003e\n  ```\n\nAnd then, you can use the Web Components:\n\n  To add todos:\n\n  ```html\n  \u003cadd-todo placeholder=\"Buy Bread, ...\"\u003e\u003c/add-todo\u003e\n  ```\n\n  To List Todos:\n\n  ```html\n  \u003clist-todos\u003e\u003c/list-todos\u003e\n  ```\n\n  The `add-todo` component also produces an event, incase the todo text is empty. You can listen to that also:\n\n  ```js\n\n  const el = document.querySelector('add-todo');\n  el.addEventListener('onerror', (event) =\u003e {\n    // do something when there is an error\n    alert(event.detail);\n  });\n\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmainawycliffe%2Fgdg-devfest19-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmainawycliffe%2Fgdg-devfest19-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmainawycliffe%2Fgdg-devfest19-demo/lists"}