Skip to content
Using @angular/elements to create and built a reusable Web Component from your Github profile
Branch: master
Clone or download
Latest commit ecb5c74 Nov 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e initial commit Oct 22, 2018
elements Add github icon Nov 12, 2018
src Clean up Nov 12, 2018
.editorconfig run prettier Oct 22, 2018
.gitignore
.prettierrc run prettier Oct 22, 2018
README.md Build Web Element Nov 8, 2018
angular.json Build Web Element Nov 8, 2018
build-elements.js Build Web Element Nov 8, 2018
package-lock.json Add github icon Nov 12, 2018
package.json Build Web Element Nov 8, 2018
tsconfig.json initial commit Oct 22, 2018
tslint.json initial commit Oct 22, 2018
yarn.lock Build Web Element Nov 8, 2018

README.md

Github Vcard Web Element

Using Angular to create Web Component.

Build and use

  1. Run npm run build:elements
  2. That will build a Javsscript file into: /elements/github-vcard.js
  3. Create a HTML page with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Custom Element</title>

</head>
<body>
    <github-vcard user="YOUR_GITHUB_USERNAME"></github-vcard>
    <script type="text/javascript" src="github-vcard.js"></script>
</body>
</html>
  1. And you are all set

@angular/cli

This project was generated with Angular CLI version 7.0.2.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

You can’t perform that action at this time.