Angular innerHTML limitation in dynamic component injection
I have this type of safe HTML string that comes from the server, it is a preview that I want to inject into an Angular 6.0 application.
The number of sections and sub-section is varying.
<div id="s1" class="section">
<div class="section-content">
start of content
<div id="ss1" class="sub-section">
content of sub-section
</div>
end of content
</div>
</div>Basically I know how to use the innerHTML attribute to do this. The problem is that I have to make this preview "reacting" like an Angular component.
So I thought about dynamic component injection, a component for the section and a component for the sub-section. For the sub-section rendering is easily done with a
innerHTML attribute. But I do not know how to render the section because inside "start of content" a tag can be opened and close only in "end of content" this
exclude the use of the innerHTML attribute for rendering the section that must be included in a parent tag.
Does any one can help me on this subject ?
Thanks in advance !
angular innerhtml code-injection
edited Nov 13 '18 at 4:02
AspiringMat
471418
asked Nov 10 '18 at 13:33
luckylucky
32
add a comment |
I have this type of safe HTML string that comes from the server, it is a preview that I want to inject into an Angular 6.0 application.
The number of sections and sub-section is varying.
<div id="s1" class="section">
<div class="section-content">
start of content
<div id="ss1" class="sub-section">
content of sub-section
</div>
end of content
</div>
</div>Basically I know how to use the innerHTML attribute to do this. The problem is that I have to make this preview "reacting" like an Angular component.
So I thought about dynamic component injection, a component for the section and a component for the sub-section. For the sub-section rendering is easily done with a
innerHTML attribute. But I do not know how to render the section because inside "start of content" a tag can be opened and close only in "end of content" this
exclude the use of the innerHTML attribute for rendering the section that must be included in a parent tag.
Does any one can help me on this subject ?
Thanks in advance !
angular innerhtml code-injection
edited Nov 13 '18 at 4:02
AspiringMat
471418
asked Nov 10 '18 at 13:33
luckylucky
32
First of all leave the idea of having innerHTML for dynamic content specially when the you have Angular Component in it. Here is the example of dynamic creation of component stackblitz.com/edit/…
– Sunil Singh
Nov 10 '18 at 14:06
Thanks for your attention and this good sample with output event strategy in dynamic component injection. My goal is to inject dynamically unknown components, With other answer, i realise that i had to compile them on th fly.
– lucky
Nov 14 '18 at 6:08
add a comment |
I have this type of safe HTML string that comes from the server, it is a preview that I want to inject into an Angular 6.0 application.
The number of sections and sub-section is varying.
<div id="s1" class="section">
<div class="section-content">
start of content
<div id="ss1" class="sub-section">
content of sub-section
</div>
end of content
</div>
</div>Basically I know how to use the innerHTML attribute to do this. The problem is that I have to make this preview "reacting" like an Angular component.
So I thought about dynamic component injection, a component for the section and a component for the sub-section. For the sub-section rendering is easily done with a
innerHTML attribute. But I do not know how to render the section because inside "start of content" a tag can be opened and close only in "end of content" this
exclude the use of the innerHTML attribute for rendering the section that must be included in a parent tag.
Does any one can help me on this subject ?
Thanks in advance !
angular innerhtml code-injection
edited Nov 13 '18 at 4:02
AspiringMat
471418
asked Nov 10 '18 at 13:33
luckylucky
32
I have this type of safe HTML string that comes from the server, it is a preview that I want to inject into an Angular 6.0 application.
The number of sections and sub-section is varying.
<div id="s1" class="section">
<div class="section-content">
start of content
<div id="ss1" class="sub-section">
content of sub-section
</div>
end of content
</div>
</div>Basically I know how to use the innerHTML attribute to do this. The problem is that I have to make this preview "reacting" like an Angular component.
So I thought about dynamic component injection, a component for the section and a component for the sub-section. For the sub-section rendering is easily done with a
innerHTML attribute. But I do not know how to render the section because inside "start of content" a tag can be opened and close only in "end of content" this
exclude the use of the innerHTML attribute for rendering the section that must be included in a parent tag.
Does any one can help me on this subject ?
Thanks in advance !
<div id="s1" class="section">
<div class="section-content">
start of content
<div id="ss1" class="sub-section">
content of sub-section
</div>
end of content
</div>
</div><div id="s1" class="section">
<div class="section-content">
start of content
<div id="ss1" class="sub-section">
content of sub-section
</div>
end of content
</div>
</div>angular innerhtml code-injection
angular innerhtml code-injection
edited Nov 13 '18 at 4:02
AspiringMat
471418
asked Nov 10 '18 at 13:33
luckylucky
32
edited Nov 13 '18 at 4:02
AspiringMat
471418
asked Nov 10 '18 at 13:33
luckylucky
32
edited Nov 13 '18 at 4:02
AspiringMat
471418
edited Nov 13 '18 at 4:02
AspiringMat
471418
edited Nov 13 '18 at 4:02
AspiringMat
471418
471418
asked Nov 10 '18 at 13:33
luckylucky
32
asked Nov 10 '18 at 13:33
luckylucky
32
asked Nov 10 '18 at 13:33
luckylucky
32
32
First of all leave the idea of having innerHTML for dynamic content specially when the you have Angular Component in it. Here is the example of dynamic creation of component stackblitz.com/edit/…
– Sunil Singh
Nov 10 '18 at 14:06
Thanks for your attention and this good sample with output event strategy in dynamic component injection. My goal is to inject dynamically unknown components, With other answer, i realise that i had to compile them on th fly.
– lucky
Nov 14 '18 at 6:08
add a comment |
First of all leave the idea of having innerHTML for dynamic content specially when the you have Angular Component in it. Here is the example of dynamic creation of component stackblitz.com/edit/…
– Sunil Singh
Nov 10 '18 at 14:06
Thanks for your attention and this good sample with output event strategy in dynamic component injection. My goal is to inject dynamically unknown components, With other answer, i realise that i had to compile them on th fly.
– lucky
Nov 14 '18 at 6:08
First of all leave the idea of having innerHTML for dynamic content specially when the you have Angular Component in it. Here is the example of dynamic creation of component stackblitz.com/edit/…
– Sunil Singh
Nov 10 '18 at 14:06
First of all leave the idea of having innerHTML for dynamic content specially when the you have Angular Component in it. Here is the example of dynamic creation of component stackblitz.com/edit/…
– Sunil Singh
Nov 10 '18 at 14:06
Thanks for your attention and this good sample with output event strategy in dynamic component injection. My goal is to inject dynamically unknown components, With other answer, i realise that i had to compile them on th fly.
– lucky
Nov 14 '18 at 6:08
Thanks for your attention and this good sample with output event strategy in dynamic component injection. My goal is to inject dynamically unknown components, With other answer, i realise that i had to compile them on th fly.
– lucky
Nov 14 '18 at 6:08
add a comment |
1 Answer
1
active
oldest
votes
I think your problem will be solved if you make a on-the-fly component that will be helpful with your case I thought
Check the last section of this article which talks in depth about it with code example:
https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36
answered Nov 10 '18 at 23:57
ShorbagyShorbagy
1713
Your answer saved my life ! Thanks again. I just would like to show you this arcticle that's going deeper in the technique (with AOT and JIT problematic): blog.angularindepth.com/…
– lucky
Nov 13 '18 at 11:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239477%2fangular-innerhtml-limitation-in-dynamic-component-injection%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think your problem will be solved if you make a on-the-fly component that will be helpful with your case I thought
Check the last section of this article which talks in depth about it with code example:
https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36
answered Nov 10 '18 at 23:57
ShorbagyShorbagy
1713
Your answer saved my life ! Thanks again. I just would like to show you this arcticle that's going deeper in the technique (with AOT and JIT problematic): blog.angularindepth.com/…
– lucky
Nov 13 '18 at 11:54
add a comment |
I think your problem will be solved if you make a on-the-fly component that will be helpful with your case I thought
Check the last section of this article which talks in depth about it with code example:
https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36
answered Nov 10 '18 at 23:57
ShorbagyShorbagy
1713
Your answer saved my life ! Thanks again. I just would like to show you this arcticle that's going deeper in the technique (with AOT and JIT problematic): blog.angularindepth.com/…
– lucky
Nov 13 '18 at 11:54
add a comment |
I think your problem will be solved if you make a on-the-fly component that will be helpful with your case I thought
Check the last section of this article which talks in depth about it with code example:
https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36
answered Nov 10 '18 at 23:57
ShorbagyShorbagy
1713
I think your problem will be solved if you make a on-the-fly component that will be helpful with your case I thought
Check the last section of this article which talks in depth about it with code example:
https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36
answered Nov 10 '18 at 23:57
ShorbagyShorbagy
1713
answered Nov 10 '18 at 23:57
ShorbagyShorbagy
1713
answered Nov 10 '18 at 23:57
ShorbagyShorbagy
1713
answered Nov 10 '18 at 23:57
ShorbagyShorbagy
1713
1713
Your answer saved my life ! Thanks again. I just would like to show you this arcticle that's going deeper in the technique (with AOT and JIT problematic): blog.angularindepth.com/…
– lucky
Nov 13 '18 at 11:54
add a comment |
Your answer saved my life ! Thanks again. I just would like to show you this arcticle that's going deeper in the technique (with AOT and JIT problematic): blog.angularindepth.com/…
– lucky
Nov 13 '18 at 11:54
Your answer saved my life ! Thanks again. I just would like to show you this arcticle that's going deeper in the technique (with AOT and JIT problematic): blog.angularindepth.com/…
– lucky
Nov 13 '18 at 11:54
Your answer saved my life ! Thanks again. I just would like to show you this arcticle that's going deeper in the technique (with AOT and JIT problematic): blog.angularindepth.com/…
– lucky
Nov 13 '18 at 11:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239477%2fangular-innerhtml-limitation-in-dynamic-component-injection%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
First of all leave the idea of having innerHTML for dynamic content specially when the you have Angular Component in it. Here is the example of dynamic creation of component stackblitz.com/edit/…
– Sunil Singh
Nov 10 '18 at 14:06
Thanks for your attention and this good sample with output event strategy in dynamic component injection. My goal is to inject dynamically unknown components, With other answer, i realise that i had to compile them on th fly.
– lucky
Nov 14 '18 at 6:08