nitayneeman / made-with-love

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

Made With Love

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!