injecting dynamic html inside the components from index.html in angular 8

Question

I am working on a web app. which has magnolia as CMS. i am still new here but i will explain the scenario. magnolia is providing the index.html which has reference of the components.But for some of those components it also provides some additional html content. this additional content has to be shown inside the particular component's template. refer following for better understanding.(remember this is inside the index.html)

<my-component>
<div> this division has to be shown inside the my component template.</div>
</my-component>

I have tried following approaches till now.

trying to use - this apparently does not work as i have learnt recently that the angular is not the master of root template(index.html). so ng-content never works. correct me if i am wrong.
using shadow dom view encapsulation. I am not expert in this, but setting viewencapsulation = shadowdom and defining slot inside the component template fulfills my purpose. The only issue with this approach is the scope of this shadow element. it will be inside the shadow root which has its own scope so no global styles are applied inside it. i had to import all the global css for each such component, which makes the main.js go crazy in size.

can someone please suggest me if there is any better or other solution to this problem?

score 0 · Answer 1 · answered Oct 31 '19 at 14:11

0

Have you tried using Input() values for that component?

index.html

<my-comp [myInputs]="'My Input HTML <b>Content</b>'">

your receiving component…

<div [innerHTML]="myInputs"></div>

answered Oct 31 '19 at 14:11

gsa.interactive

31
1

Hi thanks for your reply. i dont think it is going to work as this index.html is provided by the cms and they can just add the html content inside the component selector. – Vikas Dubey Oct 31 '19 at 14:33
You can also try to get the DOM element's content by referring the TemplateRef like in shown this page: https://www.concretepage.com/angular-2/angular-2-viewchild-example ```
My HTML Content
``` ``` @ViewChild('title') private elTitle : ElementRef; ``` Therefore your CMS guys need to add the i.e. "....#title...." reference – gsa.interactive Oct 31 '19 at 16:10

score 0 · Answer 2 · answered Apr 08 '21 at 16:23

On my side, I use <ng-content></ng-content> inside the component where I want to put my dynamic content.

Ex:

<app-help-tool>
      <span i18n="@@pictoTable_helpPictoList">Click on a picto to see its description.</span>
</app-help-tool>

And in HelpToolComponent.ts:

  <div 
    class="help_content" 
    *ngIf="this.isVisible && this.helpService.isHelpOn()" 
    [@showHideHelp]
    (click)="showHideHelp()"
  >
    <ng-content></ng-content>
  </div>

The result is to put the span content into the div of the component.

injecting dynamic html inside the components from index.html in angular 8

2 Answers2