Angular Dynamic Hooks

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.

Installation

Simply install via npm (or yarn)

npm install ngx-dynamic-hooks

Compatibility

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.

Quickstart

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.

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 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. 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.