How to set value one authored component to another authored component

[prachiat]

suppose i have authored cta component i want this authored value into other component that cards. How i can achive this? as I am New to AEM please Help me on this.

[DPrakashRaj]

You can’t directly pass a value from one component to another unless otherwise you are storing the value on page properties instead of components or uses cookie or local storage (not recommended)

[prachiat]

i am storing as page property those authored value then how i can achieve

in other component

[DPrakashRaj]

In other components html you can use pageproperties.fieldName to get the value authored on page. Something similar to ${pageProperties.jcr:title}

[Rohan_Garg]

@prachiat - Page Properties as suggested by @DPrakashRaj is one way. 
But make sure the property is relevant to the page - as coupling a component property to page property is not an ideal design use case.

You can also look at the Shared Component Properties if there is a coupling between 2 components for the data.

Shared Component Properties - ACS Commons

Blog for Reference - AEM Shared Content and Component Properties

Also, you can try out the blog AEM Sharing data between components wherein the parent component sets the data.
In order to access this data you need to very specifically ask for a specific CRX node of a specific resource type with a specific name.

Hope this helps!

Rohan Garg

[tushaar_srivastava · Accepted solution]

Hi @prachiat 

solution:

Here are some sample snippet you can follow to achieve this.

1- Create Sling Model for your page

@Model(adaptables = Page.class)
public class PageModel{

    @Inject
    private String ctaText;

    public String getCtaText() {
        return ctaText;
    }
}

2- Create a Sling Model for Card component:

@Model(adaptables = Resource.class)
public class CardComponentModel {

    @Self
    private SlingHttpServletRequest request;

    @ScriptVariable
    private Page currentPage;

    public PageModel getPageModel() {
        return currentPage.adaptTo(PageModel.class);
    }
}

 
3- And by this you can use the page model in your card component HTL : This allows you to use the authored CTA text in your Card component.

<sly data-sly-use.model="com.project.aem.components.CardComponentModel">
    <div>${model.pageModel.ctaText}</div>
</sly>

Follow the same in squence to your requirement you will be able to achieve it..