How to declare comments in HandlebarJS with examples?

In this tutorial, Learned about how to declare comments in the handlebarJS template scripting language. Comments are text to describe line or code components.

These are ignored by the compiler or interpreter in any programming language.

Do handlebarJS support comments? Yes, It supports and is used to generate HTML content by the handlebar engine.

Does it support inline-block and multiline comments?

Inline comments are not supported, but support single and multi-line comments.

Are the generated comments visible in HandlebarJS?

Generated HTML does not contain comments.

These comments are not visible in the generated HTML output We can use either single or multi-line comments.

#How to define Single-line comments in HandlebarJS

These are comments that are a single line of text inside double braces. Comments start with !, followed by comment text, inside {{}} Syntax

{{! comment text or expression}}

Example

{{! Check name exists and print }}

<div class="printname">
{{#if name}}
<h1>{{name}} {{salary}}</h1>
{{/if}}

A comment is not generated in HTML Generated HTML

<div class="printname">
  <h1>john 5000</h1>
</div>

#Declare Multi-line comments in HandlebarJS

These comments always start with !--, and comment text or expression can be spanned in multiple lines, and ends with -- inside double braces.

Syntax

{{!-- multi-line
comments
--}}

Example

{{!-- Check if the condition name
and print }} --}}
<div class="printname">
{{#if name}}
<h1>{{name}} {{salary}}</h1>
{{/if}}

The generated output does not contain comment text

<div class="printname">
  <h1>john 5000</h1>
</div>

#Adding HTML comments inside the handlebar template

These comments adds to HTML and output as HTML comments.

These are always wrapped inside a bracket syntax <!-- -->.

<div class="printname">
  <!-- Checks Name is null and print name and salary -->
  {{#if name}}
  <h1>{{name}} {{salary}}</h1>
  {{/if}}
</div>

Output

<div class="printname">
  <!-- Checks Name is null and print name and salary -->
  <h1>john 5000</h1>
</div>

#Conclusion

Handlebar supports different comments single and multi-line , and HTML comments.