Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks
Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM.
https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks
Last synced: 24 days ago
JSON representation
Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM.
- Host: GitHub
- URL: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks
- Owner: Angular-Dynamic-Hooks
- License: mit
- Created: 2020-08-06T18:44:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T11:14:12.000Z (about 2 months ago)
- Last Synced: 2024-11-18T05:19:06.394Z (25 days ago)
- Language: TypeScript
- Homepage:
- Size: 2.6 MB
- Stars: 117
- Watchers: 6
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - ngx-dynamic-hooks - Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-dynamic-hooks - Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-dynamic-hooks - Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM. (Table of contents / Third Party Components)
README
# Angular Dynamic Hooks
[](https://github.com/angular-dynamic-hooks/ngx-dynamic-hooks/actions/workflows/ci-test.yml)
[](https://codecov.io/gh/angular-dynamic-hooks/ngx-dynamic-hooks)
[](https://www.npmjs.com/package/ngx-dynamic-hooks)
[](https://github.com/angular-dynamic-hooks/ngx-dynamic-hooks/blob/master/LICENSE.md)
[](https://www.paypal.com/donate/?hosted_button_id=3XVSEZKNQW8HC)
Angular Dynamic Hooks allows you to load Angular components into dynamic content, such as HTML strings (similar to a "dynamic" template) or even already-existing HTML structures.
Works as part of an Angular app or fully standalone. Load components by selectors or **any text pattern**. No JiT-compiler required - [just install and go](https://angular-dynamic-hooks.com/guide/quickstart).
# Installation
Simply install via npm (or yarn)
```sh
npm install ngx-dynamic-hooks
```
# Compatibility
| Angular | Version | NPM |
| --- | --- | --- |
| 6 - 12 | 1.x.x | `ngx-dynamic-hooks@^1` |
| 13-16 | 2.x.x | `ngx-dynamic-hooks@^2` |
| 17+ | 3.x.x | `ngx-dynamic-hooks@^3` |
As the library does not rely on a runtime compiler, it works in both JiT- and AoT-environments.
**Upgrading to v3**: If you have been using v2 of the library and are looking to upgrade, have a look at [Version 3 - What's new?](https://angular-dynamic-hooks.com/guide/version-3-whats-new) for a list of breaking changes.
# Quickstart
Import the `DynamicHooksComponent` as well as your dynamic component(s) to load:
```ts
import { Component } from '@angular/core';
import { DynamicHooksComponent } from 'ngx-dynamic-hooks';
import { ExampleComponent } from 'somewhere';
@Component({
...
imports: [DynamicHooksComponent]
})
export class AppComponent {
// The content to parse
content = 'Load a component here: ';
// A list of components to look for
parsers = [ExampleComponent];
}
```
Then just use `` where you want to render the content:
```html
```
That's it! If `` is the selector of `ExampleComponent`, it will automatically be loaded in its place, just like in a normal template.
# Documentation
Please note that the above is a very minimal example and that there are plenty more features and options available to you. [Check out the docs](https://angular-dynamic-hooks.com/guide/) to find out how to tailor the library to your exact needs. Highlights include:
* ⭐ Loads fully-functional Angular components into dynamic content
* 📖 Parses both strings and HTML trees to load components into them like a template
* 🚀 Can be used fully standalone (load components into HTML without Angular)
* 🏃 Works **without** needing the JiT compiler
* 💻 Works **with** Server-Side-Rendering
* 🔍 Loads components by their selectors, custom selectors or **any text pattern of your choice**
* ⚙️ Services, Inputs/Outputs, Lifecycle Methods and other standard features all work normally
* 💤 Allows lazy-loading components only if they appear in the content
* 🔒 Can pass custom data safely to your components via an optional context object
# Donate
If you like the the library and would like to support the ongoing development, maintenance and free technical support, you can [consider making a small donation](https://www.paypal.com/donate/?hosted_button_id=3XVSEZKNQW8HC). Your help is greatly appreciated - Thank you!
# Issues
Please post bugs or any bigger or smaller questions you might have in the issues tab and I will have a look at them as soon as possible.