https://github.com/nitayneeman/made-with-love
🚀 An experimental project which demonstrates an Angular Package which contains Angular Elements and Schematics
https://github.com/nitayneeman/made-with-love
angular angular-elements angular-library angular-package angular-workspace component components custom element elements experimental made-with-love ng-add schematic schematics web
Last synced: 5 months ago
JSON representation
🚀 An experimental project which demonstrates an Angular Package which contains Angular Elements and Schematics
- Host: GitHub
- URL: https://github.com/nitayneeman/made-with-love
- Owner: nitayneeman
- License: mit
- Created: 2018-01-10T21:27:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-14T01:03:21.000Z (about 3 years ago)
- Last Synced: 2025-09-03T23:56:29.821Z (5 months ago)
- Topics: angular, angular-elements, angular-library, angular-package, angular-workspace, component, components, custom, element, elements, experimental, made-with-love, ng-add, schematic, schematics, web
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/made-with-love
- Size: 4.43 MB
- Stars: 67
- Watchers: 3
- Forks: 26
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](http://nitayneeman.com/posts/making-an-addable-angular-package-using-schematics) 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:
```javascript
@NgModule({
imports: [...],
declarations: [...],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HostModule {}
```
Insert the following line into a template:
```html
```
## ⚠️️ 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](https://github.com/nitayneeman/made-with-love/tree/release/v1.1.0) branch.
## 💁🏻 Contributing
This is an open source project. Any contribution would be greatly appreciated!