I have a component within another component. How do I pass a value from the outer component to the inner component? | Community
Skip to main content
jayv25585659
jayv25585659
Level 8
July 3, 2023
Solved

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

  • July 3, 2023
  • 3 replies
  • 2341 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by AsifChowdhury

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.

3 replies

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity Advisor
Community Advisor
July 3, 2023

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

Aanchal Sikka
    jayv25585659
    jayv25585659Author
    Level 8
    July 4, 2023

    let me try this. thanks

      Sady_Rifat
      Community Advisor
      Sady_RifatCommunity Advisor
      Community Advisor
      July 3, 2023

      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
        jayv25585659Author
        Level 8
        July 4, 2023

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

          AsifChowdhury
          Community Advisor
          AsifChowdhuryCommunity AdvisorAccepted solution
          Community Advisor
          July 13, 2023

          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.

            Terms & ConditionsAccessibility statement

            Loading footer...