failed to render a simple button

[its-dibo]

I just tried to dynamically inject just a built-in html tag like that

 <ngx-dynamic-hooks
      [content]="
        '<button (click)=\'onClick()\'>value</button>'
      "
    ></ngx-dynamic-hooks>

but instead of rendering a button, I see just its value as a plain text

[MTobisch]

In your code example, the value inside the button doesn't have curly braces around it, so I assume the actual code is <button (click)=\'onClick()\'>{{value}}</button>?

But either way, you unfortunately can't use a button with a click handler or interpolation (curly braces) like that directly in the content string. Because the first is a directive and the second one is an Angular template syntax feature, neither of which are parsed by my library. Keep in mind that ngx-dynamic-hooks only looks for registered components and nothing else.

To be able to support all features of Angular templates, I would have to include the Angular compiler within the library which is a huge can of worms.

But! This is a common problem and easily solved. What you could do is simply wrap your button in a custom ButtonComponent and register it with the library. Kind of like this:

<app-mybutton [value]="context.value" (click)="context.onClick()"></app-mybutton>

This will be parsed by ngx-dynamic-hooks just fine. Then inside MyButtonComponent and its template, you can again use Angular with all its features, so just render the actual button with interpolation and its click handler in there.

[its-dibo]

What you could do is simply wrap your button in a custom ButtonComponent

this solution makes me forces to make a custom component for each html tag, and all available attributes as @Inputs of it

[MTobisch]

Well, basic HTML attributes are still rendered and work as normal, so you wouldn't need to create custom components just for that. Its just Angular-specific stuff like interpolation {{ value }}, event handlers (click) and so forth.

So yeah, creating custom components only realistically works if you have a specific piece of Angular template syntax you want to wrap. If you want to parse full-on Angular templates with all they have to offer, that's unfortunately out of the scope of this library.