{

How to declare comments in HandlebarJS with examples?


Handlebar comments example

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 uses 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.

Does it support two types of comments in HandlebarJS?

  • Comments are shown in generated HTML output
  • Comments not shown in HTML output

Generated HTML does not contain comments

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

HandlebarJS Single-line comments

These are comments that are a single line of text inside double braces.

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>

HandlebarJS Multi-line comments

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>

HTML comments inside the handlebar template

These comments add to HTML and output as HTML comments.

These are always wrapped inside a bracket syntax

Output

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

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

4 ways to test button click event handler in Angular unit testing

Angular component testing - Input text value with test case examples

Angular unit test Calling a method from the constructor of a class

Difference between HandlebarJS and Mustache |javascript templates Engine comparison

Handlebar for loop iteration array of objects | each helper example

Handlebar if-else helper examples| Conditional expression in the handlebar

how to fix 404 errors for webserver during karma unit testing Angular