Home

Awesome

<img align="left" width="45" height="90" src="https://github.com/angular-dynamic-hooks/ngx-dynamic-hooks/assets/12670925/5322c5e3-121b-4a43-906d-6a440b909919" alt="The logo for the Angular Dynamic Hooks library">

Angular Dynamic Hooks

GitHub Actions Workflow Status Coverage NPM License Static Badge

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.

A short animated gif showing how to use the Angular Dynamic Hooks library to load components

Installation

Simply install via npm (or yarn)

npm install ngx-dynamic-hooks

Compatibility

AngularVersionNPM
6 - 121.x.xngx-dynamic-hooks@^1
13-162.x.xngx-dynamic-hooks@^2
17+3.x.xngx-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.

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:

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.