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.

[Zendarkke]

I would like to pull the data from the components present in the child page and display it in my component in the homepage. Is there a way to do this without creating a content api?

[SureshDhulipudi · Accepted solution]

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...

[khamat_bn]

@Zendarkke 
if we want to load data/content from child pages like from mobile or tablet - we need to create sling model to fetch the data and HTL to display it, but there will be ajax changes as well. check below codes . 

and below is ajax code which is main