AEM: passing properties to sightly component from sling model inside HTML

Question

We have a requirement wherein we need to create a template dynamically using the sling model response.

The challenge here is we have got some common components that we want to use for building up our template.

Is there a way that I can set the common components properties using slightly.

Any help is appreciated.

Answer 1

You can initialise the Sling Model with the HTL Use API:

<sly data-sly-use.myModel="mypackage.MyModel">

and then access it's properties/methods in HTL Expressions:

${myModel.myProperty}

For a simple example, have a look at the title component for AEM: https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/wcm/components/title/v2/title/title.html