https://github.com/playerx/angular-elements-sample

Demo project, that demonstrates how to generate Web Components using Angular Elements, cool stuff :)
https://github.com/playerx/angular-elements-sample

angular demo elements sample webcomponents

Last synced: 5 days ago
JSON representation

Demo project, that demonstrates how to generate Web Components using Angular Elements, cool stuff :)

• Host: GitHub
• URL: https://github.com/playerx/angular-elements-sample
• Owner: playerx
• Created: 2017-12-08T02:03:34.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T17:54:55.000Z (over 1 year ago)
• Last Synced: 2024-04-10T14:13:00.858Z (7 months ago)
• Topics: angular, demo, elements, sample, webcomponents
• Language: TypeScript
• Homepage: https://angular-elements-sample.now.sh/
• Size: 1.31 MB
• Stars: 18
• Watchers: 3
• Forks: 5
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# AngularElementsSample

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.0. and demonstrates how web components can be generated using standard angular components

## Development server

Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. 

## How to implement

Please review the commits, I've created step by step commits. 

## How to use

After build `npm run build` there will be three js files (inline.bundle.js, main.bundle.js, styles.bundle.js) include them in any html file and you will have access to your web components, created in angular!

## @angular/elements

this package is coppied from angular repository labs/elements branch, it's folder can be removed after this package will be released and will be available on npm

## Summarize

We don't have bootstrap component in AppModule, instead of that we can have any number of entry components and they all will be web components!

For demonstration I've commented standard app-root component in index.html and placed multiple app-like-button components.

To create more web components using angular, just generate new component `ng g component my-new-comp` and place in AppModule's entryComponent's list, thats it, really simple :)

## Video

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/ljsOPm4MMEo/0.jpg)](https://www.youtube.com/watch?v=ljsOPm4MMEo)