Commenting (out) code in Angular2 TypeScript

Question

I have the following Angular2 TypeScript code with a section commented out as per Javascript convention:

@Component({
    selector: 'my-app',
    template:
    `<h1>{{title}}</h1>
    <h2>{{lene.name}}</h2>
    <div><label>id: </label>{{lene.id}}</div>
    /*<div>
       <label>name: </label>
       <input [(ngModel)]="lene.name" placeholder="name">
    </div>*/`
    <div><label>description: </label>{{lene.description}}</div>
})

However, once the TypeScript compiles to Javascript I get the following output to my web browser:

I've searched the API docs and can't find an entry specifying the syntax for this quite basic feature. Anyone know how you do multi-line comments in TypeScript?

score 23 · Accepted Answer · answered Apr 04 '16 at 07:27

23

/* */ is typescript comment delimiter

They don't work inside a string literal.

You can use HTML comment syntax instead .

@Component({
    selector: 'my-app',
    template:
    `<h1>{{title}}</h1>
    <h2>{{lene.name}}</h2>
    <div><label>id: </label>{{lene.id}}</div>
    <!-- <div>
       <label>name: </label>
       <input [(ngModel)]="lene.name" placeholder="name">
    </div> -->'
    <div><label>description: </label>{{lene.description}}</div>
})

The HTML commented out this way still is added to the DOM but only as comment.

answered Apr 04 '16 at 07:27

Günter Zöchbauer

623,577
216
2,003
1,567

Basically, because the template section is parsed as HTML not Javascript, I should be using HTML syntax for the comments, right? Or is it more complex than that? Either way the solution works :). – Peter David Carter Apr 04 '16 at 07:47
1

From the TypeScript point-of-view `\`
\`` is a string. Within strings comments (actually almost everything except string interpolation) is ignored. When using HTML comment syntax the string is fowarded to the browser (including the ``) which then interprets this part of the string as comment.
– Günter Zöchbauer Apr 04 '16 at 07:48
Interesting info about the comment delimiting. Do you know of an example or an API doc reference so I could look it over? – Peter David Carter Apr 04 '16 at 07:57
1

TypeScript comment syntax is basically [ES5 comment syntax](http://www.ecma-international.org/ecma-262/5.1/#sec-7.4) with some additions like "Source File Dependencies" http://stackoverflow.com/questions/23072286/where-is-the-syntax-for-typescript-comments-documented. Backticks are explained here https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings – Günter Zöchbauer Apr 04 '16 at 08:01
@GünterZöchbauer I'm working on a very simple Angular2 project and have an HTML comment in my template and the comment is not being added to the DOM. The code runs, but no comment in the output. – Scott Marcus Nov 23 '16 at 15:05
It's likely that Angular just strips comments. What's the point of adding them anyway. You could try `
">
`. You might require what is explained in http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 – Günter Zöchbauer Nov 23 '16 at 15:08
@GünterZöchbauer The point of adding comments? Documentation? Anyway, I wanted to ask because your answer indicated that normal HTML comments would be added to the DOM (and you would think that they would), but I'm not seeing that behavior. – Scott Marcus Nov 23 '16 at 15:14
In the source code the comments stay available, but for the browser it's considered more important to reduce file size as much as possible. – Günter Zöchbauer Nov 23 '16 at 15:15
@GünterZöchbauer Not sure about that. Angular is outputting its own HTML comments to the DOM, just not mine. And, there are certainly use cases where documentation in the response is warranted. – Scott Marcus Nov 23 '16 at 15:18
"outputting its own HTML comments to the DOM" I think you mean what Angular adds as placeholder for binding for example with `*ngFor`. This doesn't add to download size because it's added dynamically through code. Have you tried above workaround? – Günter Zöchbauer Nov 23 '16 at 15:24
@GünterZöchbauer Your suggestion causes a "Template parse error". This is an Angular2 application, BTW. – Scott Marcus Nov 23 '16 at 15:35
That same code causes a "Template parse error" in my app. I'll play with this more. Thanks though. – Scott Marcus Nov 23 '16 at 15:43

score 3 · Answer 2 · answered Apr 04 '16 at 07:27

If you are in the template, use the HTML comment :

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{lene.name}}</h2>
    <div><label>id: </label>{{lene.id}}</div>
    <!-- div>
      <label>name: </label>
      <input [(ngModel)]="lene.name" placeholder="name">
    </div-->
    <div><label>description: </label>{{lene.description}}</div>
  `
})

score 1 · Answer 3 · answered Aug 01 '19 at 07:57

1

Does not seem to work, though, because it only hides the HTML, while still trying to execute the typescript code inside the commented section.

answered Aug 01 '19 at 07:57

hannodb

223
1
11

Commenting (out) code in Angular2 TypeScript

3 Answers3

\`` is a string. Within strings comments (actually almost everything except string interpolation) is ignored. When using HTML comment syntax the string is fowarded to the browser (including the ``) which then interprets this part of the string as comment.

Linked