How to reuse multiple component when building new one

[MichaelNeu007]

Hello, 

I am trying to develop a new component that would reuse multiple already developed components. In our project I have never seen an example where people would do it though.

For example, how do I in HTL use a core button component and author it? Basically, I would imagine something like this:

<sly data-sly-use.myComponent="com.example.aem.core.components.MyCustomComponent">

    <!-- Use the button core component -->
    <core-wcm-components:button
         sling:resourceType="core/wcm/components/button/v2/button"
         href="/path/to/link"
         title="Click here"
         iconBefore="chevron-right"
         displayType="outline"
         size="large"
         align="center">
     </core-wcm-components:button>

</sly>

I want it to statically render already pre-authored from the HTL without the ability for the authors (content creators) to change it.

Ideally I would like to then nest my container components with some content component but I imagine that would be done in a similar fashion.

Something like a React component but right now just using HTL.

[arunpatidar]

Hi @MichaelNeu007 
Here is the example of reusing title, text and image core components and creating new component called 'text-and-image'

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/a... 

[ArunaS]

Create a new component with the name that you want and re-use the pieces from other components to implement dialog properties.

You have to create HTL files and sling models for the new components. 

if you want to re-use the HTL you have to create HTL templates and re-use HTL into your component-specific HTL file.