Lightning Web Component HTML Template Directives

Let’s discuss here how to use the lightning web component HTML template directives. The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. As the name suggests, the attribute directives are altering the properties of an element to which they are attached and the structural ones are changing.HTML template directives are the special property associated with a template tag. A template is valid HTML with a root tag.When a component renders, the  tag is replaced with the name of the component, <namespace-component-name>. For example, in the browser console, a component with the template myComponent.html renders as <c-my-component>, where c is the default </c-my-namespace. Write templates using standard HTML and a few directives that are unique to Lightning Web Components. Directives are special HTML attributes, like if:true and for:each, that gives you more power to manipulate the DOM in markup.HTML templates also render data to the DOM. Use simple syntax to decoratively bind a component’s template to data in the component’s JavaScript class. Here are the HTML template directives

  1. if:true|false
  2. for:each
  3. iterator:iterator
  4. key={uniqueId}
  5. lwc:dom=”manual”

 

Using If directive

Use if:true|false directive to conditionally render DOM elements in a template. if the condition expression returns the true then we will be able to render the DOM conditionally.for example, the following code shows how to use the if the directive to render the template DOM.

Let’s suppose if you want to display the values based on some text you can able to do it as shown below.

 

Please refer this link for complete example 

 

Using for:each  directive

Use this directive to iterate over an array and render a list. for:item="currentItem"Use this directive to access the current item.The currentItem placeholder is an identifier that the model injects into the current scope.for:index="index"Use this directive to access the current item’s zero-based index.The index placeholder is a new identifier that the model injects into the current scope. For Example, the following code iterates the collection of accounts

The following example the following code will iterate the collection of nested data which contains accounts and its contacts

 

Please refer this link for complete example 

 

Using iterator Directive

Use this directive to apply special behavior to the first or last item in an array and render a list. Access these properties on the iteratorName:

  • value—The value of the item in the list. Use this property to access the properties of the array. For example, iteratorName.value.propertyName.
  • index—The index of the item in the list.
  • first—A boolean value indicating whether this item is the first item in the list.
  • last—A boolean value indicating whether this item is the last item in the list.

The following example will iterate the collection of account data.

The following example iterates the collection of nested data.

Please refer this link for complete example 

 

key={uniqueId}

Use this directive to improve rendering performance by assigning a unique identifier to each item in a list. The keymust be a string or a number, it can’t be an object. The engine uses the keys to determine which items have changed.

The following example shows how to set the key directive using key={acc.Id} on for:each iterator .

The following example shows how to set the key directive using key={it.value.Id}  on iterator.

 

Using lwc:dom=”manual” directive 

Using JavaScript to manipulate the DOM isn’t recommended because the Lightning Web Components engine does it more efficiently. However, there are some third-party JavaScript libraries that take over the DOM.Because Lightning web components use shadow DOM, if a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element.When using these libraries in a Lightning web component, add lwc:dom="manual" to any HTML element that you want to manipulate with JavaScript. When the engine sees the directive, it preserves shadow DOM encapsulation. Add the lwc:dom="manual" directive to an empty native HTML element. The owner of the component calls appendChild() on that element to manually insert the DOM.