https://github.com/mainawycliffe/gdg-devfest19-demo
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.
https://github.com/mainawycliffe/gdg-devfest19-demo
angular angularelements webcomponents
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/mainawycliffe/gdg-devfest19-demo
- Owner: mainawycliffe
- Created: 2019-11-01T22:59:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-07T11:15:28.000Z (about 6 years ago)
- Last Synced: 2025-01-07T19:38:52.200Z (over 1 year ago)
- Topics: angular, angularelements, webcomponents
- Language: TypeScript
- Homepage:
- Size: 616 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo Angular Elements (Web Components) Demo for GDG Devfest Rift Valley 2019
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**.
## Demo
You can play with the demo for this well, demo, [here](https://mainawycliffe.github.io/gdg-devfest19-demo/).
## Building this Demo
```shell
ng build --prod
```
You can skip the `--output-hashing` flag as I have set it permanently to none inside `angular.json`.
After 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.
```shell
node concat.js
```
> I will share more scripts for achieving the same, from different scripting languages such as bash.
If 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.
## Using the Web Components
You can then use the web components as follows inside any HTML.
First, Import the the three build artifacts into you HTML File.
Inside Header, Import the CSS:
```html
```
And then, inside the body, just next to the body closing tags import the JS:
```html
```
And then, you can use the Web Components:
To add todos:
```html
```
To List Todos:
```html
```
The `add-todo` component also produces an event, incase the todo text is empty. You can listen to that also:
```js
const el = document.querySelector('add-todo');
el.addEventListener('onerror', (event) => {
// do something when there is an error
alert(event.detail);
});
```