🚀 An experimental project which demonstrates an Angular Package which contains Angular Elements and Schematics
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
projects Resolving missing dependency Dec 7, 2018
src Moved font importing to global styles Jul 26, 2018
.editorconfig Initial commit Jan 10, 2018
.gitignore
.npmignore Added build directory to npmignore Jan 11, 2018
.prettierrc.json Installing & using Prettier Jul 12, 2018
LICENSE Initial commit Jan 10, 2018
README.md
angular.json Fixed build workflow Jul 12, 2018
package-lock.json Added missing dependency Dec 7, 2018
package.json Resolving missing dependency Dec 7, 2018
preview.png Updated README file Mar 17, 2018
tsconfig.json
tslint.json Installing & using Prettier Jul 12, 2018
webpack.config.js Resolving missing dependency Dec 7, 2018

README.md

Made With Love

npm Package Version License code style: prettier demo: stackblitz

A project that demonstrates how to build an Angular Package which provides a simple Angular Element. Also, it demonstrates how to make it addable with ng add using Schematics.

Check out this article for getting more information about the project.

How to Install

To Install using Angular, simply do:

ng add angular-made-with-love

This command will:

  • Add @angular/elements, @webcomponents/custom-elements and angular-made-with-love into package.json.
  • Run npm install.
  • Import MadeWithLoveModule into the root module of your host application.
  • Inject the polyfill’s script file into the scripts of your host application.

In case you want to do it manually, there are available CLI parameters for skipping the steps above: skipPackageJson, skipModuleImport and skipPolyfill.

How to Use

Apply CUSTOM_ELEMENTS_SCHEMA on your host module:

@NgModule({
  imports: [...],
  declarations: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HostModule {}

Insert the following line into a template:

<made-with-love name="Nitay Neeman" url="http://nitayneeman.com" size="1.5" color="red"></made-with-love>

Disclaimer

This package is intended to be used inside Angular applications. In case you want to use it as part of an non-Angular application - go to this branch.


This README was written with ❤️.