0

I have to dynamically (at runtime) create a component with template built of string. This string contains some tags that need to be replaced by Angular components.

For example

HTML template:

<div class="box">
  <div>Lorem ipsum <strong>dolor sit amet</strong></div>
  Event date:
  <span id="datepicker"></span>
  - join us.
</div>

needs to be transformed into:

<div class="box">
  <div>Lorem ipsum <strong>dolor sit amet</strong></div>
  Event date:
  <custom-datepicker></custom-datepicker>  <---- here should come Angular component
  - join us.
</div>

and rendered.

I tried to do this by using "unofficial" function ɵcompileComponent and it works fine -> https://stackblitz.com/edit/stackblitz-starters-jtnufx

Unfortunetely it breaks when is built in the AOT mode (ng build --aot -c production). Getting error:

Uncaught Error: JIT compiler unavailable

I know that there is an option of disabling aot in angular.json but I don't want to do this.

Does anyone know how to handle this?

Improve this question
2
  • 1
    Did you try using innerHTML? Commented Mar 13, 2024 at 16:57
  • 1
    innerHTML just inserts pure HTML code. You cannot compile Angular components Commented Mar 14, 2024 at 7:07
Related questions
754
How can I select an element in a component template?
1247
Angular: conditional class with *ngClass
1080
Angular/RxJS When should I unsubscribe from `Subscription`
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.