Note: You are currently browsing the documentation for an older version of the library.

Click here to switch to the newest version.

Quick start

Minimal example

Install the library with:

npm install ngx-dynamic-hooks

Then import DynamicHooksModule into your main app module and configure via forRoot():

import { DynamicHooksModule, HookParserEntry } from 'ngx-dynamic-hooks';
import { ExampleComponent } from 'somewhere';

// This automatically creates SelectorHookParsers for each listed component:
const componentParsers: Array<HookParserEntry> = [
    {component: ExampleComponent},
    // ...
];

@NgModule({
  imports: [
    // forRoot() is used to register global parsers and options
    DynamicHooksModule.forRoot({
      globalParsers: componentParsers
    }),
    // ...
  ],
  // Without Ivy: Make sure all dynamic components are listed in declarations and entryComponents.
  // Otherwise, the compiler will not include them if they aren't otherwise used in a template.
  declarations: [ ExampleComponent, /* ... */ ],
  entryComponents: [ ExampleComponent, /* ... */ ],
  // ...
})
export class AppModule { }

You can now use the OutletComponent (<ngx-dynamic-hooks>) where you want to render the content string and pass it in via the [content]-input:

<ngx-dynamic-hooks [content]="'Load a component here: <app-example></app-example>'"></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.

See it in action

The following Stackblitz example showcases how to load a couple of simple components from a string:

This is a very simple example. Check out the Configuration or even Writing your own HookParser sections to find out how to tailor everything to your exact needs.

← Previous section Introduction Next section → Component features