Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aelbore/profile-card
Profile Card Angular Elements
https://github.com/aelbore/profile-card
Last synced: 12 days ago
JSON representation
Profile Card Angular Elements
- Host: GitHub
- URL: https://github.com/aelbore/profile-card
- Owner: aelbore
- Created: 2017-12-17T15:41:31.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-17T06:23:02.000Z (over 6 years ago)
- Last Synced: 2024-10-10T20:47:15.103Z (about 1 month ago)
- Language: JavaScript
- Size: 154 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Angular Elements used as custom elements in Angular and Preact App Demo
Web Components consist of 4 main features which can be used separately or all together:
+ Custom Elements – APIs to define new HTML elements.
+ Shadow DOM – Encapsulated DOM and styling, with composition
+ HTML Imports – Declarative methods of importing HTML documents into other documents
+ HTML Templates – The `` element, which allows documents to contain inert chunks of DOM.
https://en.wikipedia.org/wiki/Web_Components
### Getting Started
#### Requirements
+ Nodejs version 7+
+ Git Bash
##### Clone Repository
```
https://github.com/aelbore/profile-card.git
cd profile-card
git submodule init
git submodule update --remote
npm install
npm run vendor:bundle
```
##### Install ngx cli
```
npm install -g @ngx-devtools/cli
```
##### Bundle Profile Card Angular Elements
```
ngx run bundle
```
##### Install submodules dependencies
```
cd ng-profile-card-demo
npm install
cd ..
cd preact-profile-card-demo
npm install
```
##### Bundle or Build dependencies
```
cd ng-profile-card-demo
ngx run bundle
cd ..
cd preact-profile-card-demo
npm run build
```
##### Start the application
```
/// for Preact
ngx run serve --type preact
/// for Angular
ngx run serve --type angular
```