How to pull child page content in parent page?

[Zendarkke]

Hi , i am trying to build more complex aem components. Imagine we have a structure as below

Products(parent page)
    -Mobile (child page 1)
    -Tablet (child page 2)

I have a component in parent Products page with list items authored to names of child pages. Now when i click on Mobile i want the mobile page contents to be populated in the component. How to achieve this?

[arunpatidar]

Hi @Zendarkke 

How would you like to display the mobile or tablet content on the parent page?

Do you want to show the entire child page, or just specific sections like the title, description, etc.? If so, you can use the Sling Resource API to read the child page's content and display it.

Alternatively, you could fetch the full content using the mobile.content.html and render it on the client side.

[SureshDhulipudi]

you can use Sling Parameterized option right - 

To pass parameters from HTL (HTML Template Language) to a Sling Model in Adobe Experience Manager (AEM), you can use data attributes in your HTL and retrieve them in the Sling Model using the @ScriptVariable or @RequestAttribute annotations.

HTL script sends parameters to the Sling Model - The model manipulates these parameters in its method and returns the result for display.

<sly data-sly-use.myModel="${'com.example.core.models.ParameterizedModel' @ myParameterOne='Hello', myParameterTwo='World'}"
data-sly-test.isReady="${myModel.isReady()}">

<p>
${myModel.value}
</p>

</sly>

<sly data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
data-sly-call="${placeholderTemplate.placeholder @ isEmpty=!isReady}">
</sly>

https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/developing/advance...