index.md

layout

landing

highlights

title icon desc Easy dynamic loading ⭐ Loads fully-functional Angular components into dynamic content at runtime title icon desc Parse any content 📖 Can parse both strings and already-loaded HTML content title icon desc Standalone mode 🚀 Can be used <a href="guide/standalone-mode" target="_blank">fully standalone</a> to load components into HTML without Angular title icon desc No JiT compiler needed 🏃 Keeps package sizes small by not relying on the Angular compiler to create components title icon desc SSR-ready 💻 Works with the native Server-Side-Rendering functionality added in Angular 17 title icon desc Load anywhere 🔍 Loads components by their selectors, custom selectors or <a href="guide/parsers#writing-your-own-hookparser" target="_blank">any text pattern of your choice</a> title icon desc No constraints ⚙️ All standard features like services, inputs/outputs, lifecycle methods, etc. work normally title icon desc Lazy-loading 💤 Optionally allows <a href="guide/configuration#lazy-loading-components" target="_blank">lazy-loading components</a> only if they appear in the content title icon desc Easy communication 🔒 Utilize a <a href="guide/dynamic-component-features" target="_blank">context object</a> to pass data safely to your dynamic components

Angular Dynamic Hooks

📄

Docs

npm

Github

♥

Donate

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.

Quickstart Docs

Features overview and highlights

{% for item in page.highlights %}

{{ item.icon }}

{{ item.title }}

{{ item.desc }}

{% endfor %}

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

{% capture guideFirstStep %}

```bash npm install ngx-dynamic-hooks ```

{% endcapture %}

{% capture guideSecondStep %}

```ts import { DynamicHooksComponent } from 'ngx-dynamic-hooks';

@Component({ ... imports: [DynamicHooksComponent] })

</div>
{% endcapture %}

{% capture guideThirdStep %}
<div class="l-guide-step-code" markdown="1">
```ts
// The content to parse
content = 'Load a component here: <app-example></app-example>';
// A list of components to look for
parsers = [ExampleComponent];

{% endcapture %}

{% capture guideFourthStep %}

```html ```

{% endcapture %}

Getting started is simple 👍

    <div class="l-guide-step">
      <div class="l-guide-step-nr">1</div>
      <div class="l-guide-step-content">
        <div class="l-guide-step-text">
          <p>Install the library with</p>
        </div>
        {{ guideFirstStep }}
      </div>
    </div>

    <div class="l-guide-arrow"><img src="{{ "/assets/images/narrow_arrow_down.png" | relative_url }}" alt="An arrow pointing downwards"></div>

    <div class="l-guide-step">
      <div class="l-guide-step-nr">2</div>
      <div class="l-guide-step-content">
        <div class="l-guide-step-text">
          <p>Import the <b>DynamicHooksComponent</b> wherever you need it</p>
        </div>
        {{ guideSecondStep }}
      </div>
    </div>

    <div class="l-guide-arrow"><img src="{{ "/assets/images/narrow_arrow_down.png" | relative_url }}" alt="An arrow pointing downwards"></div>

    <div class="l-guide-step">
      <div class="l-guide-step-nr">3</div>
      <div class="l-guide-step-content">
        <div class="l-guide-step-text">
          <p>Get your content and components to load</p>
        </div>
        {{ guideThirdStep }}
      </div>
    </div>

    <div class="l-guide-arrow"><img src="{{ "/assets/images/narrow_arrow_down.png" | relative_url }}" alt="An arrow pointing downwards"></div>

    <div class="l-guide-step">
      <div class="l-guide-step-nr">4</div>
      <div class="l-guide-step-content">
        <div class="l-guide-step-text">
          <p>And pass them to <i>&lt;ngx-dynamic-hooks&gt;</i></p>
        </div>
        {{ guideFourthStep }}
      </div>
    </div>
  </div>

  <div class="l-guide-result">
    <p class="l-guide-result-line"><b>That's it!</b> The content will now be rendered with a working <b>ExampleComponent</b> in it! 🎉</p>
    <a class="l-guide-result-button" href="{{ "guide" | relative_url }}">📄 To the full documentation </a>
  </div>

</div>