HTML Duplication When Injecting Component in a Form Container

[margaritageg]

Hello,

In a form container component I would like to inject another component something like this 

<sly data-sly-resource="${'component' @ resourceType='my/component/path'}"></sly>

Changes to the injected component's properties lead to HTML duplication. The duplication seems to be caused by a data-sly-repeat loop

<sly data-sly-repeat.paragraph="${grid.paragraphs}"
     data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType, decorationTagName='div', cssClassName=paragraph.cssClass}"></sly>
<div>

The question is how to inject component in a form container to avoid component duplication  

[Ravi_Pampana]

Hi,

If you need to conditionally inject the component only once, you can use the data-sly-test attribute:

<sly data-sly-test="${!injected}">
  <sly data-sly-resource="${ 'component' @ resourceType='my/component/path' }"></sly>
  <sly data-sly-use.injected="true"></sly>
</sly>

<!-- Your repeat logic for paragraphs -->
<sly data-sly-repeat.paragraph="${grid.paragraphs}">
  <div>
    <!-- Render paragraph content -->
    <sly data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType, decorationTagName='div', cssClassName=paragraph.cssClass}"></sly>
  </div>
</sly>

'injected' value is false or undefined then the injects the component and once it is executed `injected` value will be set to true avoid further injecting. Ensure the data-sly-repeat loop for paragraphs is separate from the component injection logic. This way, the component is not included within the loop, avoiding duplication.

[margaritageg]

Thanks for answering , but this solution didnt work for my case, is it possible to inject a component via component policies? or is there any other solution for this issue?