I have a component within another component. How do I pass a value from the outer component to the inner component?

[jayv25585659]

some info:

• Both component have its own component dialog.
• I need to pass the value of a property (entered by the author via component dialog) from the outer to the inner.
• I am inserting the inner component into the outer component via "data-sly-resource".

<div data-sly-resource="${@path=my-path-here, resourceType='myhost/components/content/my-custom-component'}" data-sly-unwrap></div>​

Thank you.

[aanchal-sikka]

Hello @jayv25585659 

You can use @requestAttributes with "data-sly-resource" to pass on the values from HTL

https://www.aemtutorial.info/p/htl-request-attributes-while-using-and.html

So, basically you read value from the outer component and pass it as a requestAttribute to inner component

[jayv25585659]

let me try this. thanks

[Sady_Rifat]

If you want only to use HTL you can follow this snippet,

<sly data-sly-use.childRes="${resource.path}/my-path-here"></sly>
<!--/* USE the object */-->
<div>Inner Component Value: ${childRes.propertyValue}</div>

Note: Before accessing give proper condition if the value exists or not. Because for the 1st time, this value will not be there.

[jayv25585659]

I think you have it the wrong way. I want the value in the outer to be accessible in the inner.

[AsifChowdhury · Accepted solution]

Hello @jayv25585659 

You can do this in this way

<sly data-sly-set.parentResource="${resource.parent}"></sly>
<h1> Parent Component Value: ${parentResource.property}</h1>

Check the value is properly assigned in the parent component dialog.