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.
Simply install via npm (or yarn)
npm install ngx-dynamic-hooks| 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? for a list of breaking changes.
Import the DynamicHooksComponent as well as your dynamic component(s) to load:
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: <app-example></app-example>';
// A list of components to look for
parsers = [ExampleComponent];
}Then just use <ngx-dynamic-hooks> where you want to render the content:
<ngx-dynamic-hooks [content]="content" [parsers]="components"></ngx-dynamic-hooks>That's it! If <app-example> is the selector of ExampleComponent, it will automatically be loaded in its place, just like in a normal template.
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 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
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. Your help is greatly appreciated - Thank you!
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.