Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

More Readable Styling Markup with the join Expression

Markup can get messy when you specify the class names to apply based on the component attribute values. Try using a join expression for easier-to-read markup.

This example sets the class names based on the component attribute values. It’s readable, but the spaces between class names are easy to forget.

1<li class="{! 'calendarEvent ' +
2    v.zoomDirection + ' ' +
3    (v.past ? 'pastEvent ' : '') +
4    (v.zoomed ? 'zoom ' : '') +
5    (v.multiDayFragment ? 'multiDayFragment ' : '')}">
6    <!-- content here -->
7</li>

Sometimes, if the markup is not broken into multiple lines, it can hurt your eyes or make you mutter profanities under your breath.

1<li class="{! 'calendarEvent ' + v.zoomDirection + ' ' + (v.past ? 'pastEvent ' : '') + (v.zoomed ? 'zoom ' : '') + (v.multiDayFragment ? 'multiDayFragment ' : '')}">
2    <!-- content here -->
3</li>

Try using a join expression instead for easier-to-read markup. This example join expression sets ' ' as the first argument so that you don’t have to specify it for each subsequent argument in the expression.

1<li
2    class="{! join(' ', 
3        'calendarEvent',
4        v.zoomDirection,
5        v.past ? 'pastEvent' : '',
6        v.zoomed ? 'zoom' : '',
7        v.multiDayFragment ? 'multiDayFragment' : ''
8    )}">
9    <!-- content here -->
10</li>

You can also use a join expression for dynamic styling.

1<div style="{! join(';', 
2    'top:' + v.timeOffsetTop + '%',
3    'left:' + v.timeOffsetLeft + '%',
4    'width:' + v.timeOffsetWidth + '%'
5)}">
6    <!-- content here -->
7</div>

Lightning Aura Components Developer Guide

More Readable Styling Markup with the join Expression

See Also