Load Angular components anywhere
Angular Dynamic Hooks can load Angular components into any dynamic content, such as strings, individual HTML elements or the whole browser page.
Features overview and highlights
Easy dynamic loading
Loads fully-functional Angular components into dynamic content at runtime
Parse any content
Can parse both strings and already-loaded HTML content
Standalone mode
Can be used fully standalone to load components into HTML without Angular
No JiT compiler needed
Keeps package sizes small by not relying on the Angular compiler to create components
SSR-ready
Works with the native Server-Side-Rendering functionality added in Angular 17
Load anywhere
Loads components by their selectors, custom selectors or any text pattern of your choice
No constraints
All standard features like services, inputs/outputs, lifecycle methods, etc. work normally
Lazy-loading
Optionally allows lazy-loading components only if they appear in the content
Easy communication
Utilize a context object to pass data safely to your dynamic components
...
<hook>
...
...
Component
...
What if you wanted to load components not just from static templates, but from dynamic content - such as string variables, HTML elements or even a live webpage?
By default, this is not easily possible.
Angular Dynamic Hooks aims to solve this problem. It offers a simple way to load Angular components into so-called hooks. Hooks can be HTML elements or text patterns.
Getting started is simple 👍
1
Install the library with
npm install ngx-dynamic-hooks
2
Import the DynamicHooksComponent wherever you need it
import { DynamicHooksComponent } from 'ngx-dynamic-hooks';
@Component({
...
imports: [DynamicHooksComponent]
})
3
Get your content and components to load
// The content to parse
content = 'Load a component here: <app-example></app-example>';
// A list of components to look for
parsers = [ExampleComponent];
4
And pass them to <ngx-dynamic-hooks>
<ngx-dynamic-hooks [content]="content" [parsers]="parsers"></ngx-dynamic-hooks>
That's it! The content will now be rendered with a working ExampleComponent in it! 🎉
📄 To the full documentation