How to insert authored number from cq:dialog into HTML

[Codewalker]

Compared to most questions here, this is very basic, but I can't seem to find a resource with the information. In my cq:dialog for a new component that I'm building, I'm using the sling:resourceType, "granite/ui/components/foundation/form/numberfield" to capture a number from content managers, which represents "height" in pixels. How can I insert that authored number into the following HTML?

For example, if the content editor enters "25", how can I get this result?

<pre style="height:25;"> </pre>

[DPrakashRaj]

You can use something like this 

<div id="${models.id}" class="cmp-container" style="max-height: ${properties.maxHeight @ context="styleString"}px">
  <!-- Your content here -->
</div> 

so in your case it going to be

<pre style="height:${properties.maxHeight @ context="styleString"}px"> </pre>

to learn more on aem sightly please refer below documents https://experienceleague.adobe.com/docs/experience-manager-htl/content/getting-started.html?lang=en

[Codewalker]

Thanks for the input. Do I also need to create a model, such as testComponentModel.java? 

[DPrakashRaj]

Not necessarily, you can read dialog properties on their respective html by using {properties.fieldName} in case you are not having any back end logic for the dialog and if you need some logic or manipulation on the data you can surely write your componentModel.java and it’s test class 

[Mahedi_Sabuj · Accepted solution]

For style and script contexts, it is mandatory to set a context. If the context isn't set, the expression shouldn't output anything. 

<pre style="height: ${properties.height @ context='styleToken'}"></pre>

You can find several examples here https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#113-context-sensitive