angular-made-with-love

🚀 An experimental project which demonstrates an Angular Package which contains Angular Elements and Schematics

Usage no npm install needed!

<script type="module">
  import angularMadeWithLove from 'https://cdn.skypack.dev/angular-made-with-love';
</script>

README

Preview

Made With Love

npm Demo Downloads License

Installation · Usage · Disclaimer

ℹ️️ Description

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.


💁🏻 Contributing

This is an open source project. Any contribution would be greatly appreciated!