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?

Answer 1

/* */ 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.

Answer 2

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>
  `
})

Answer 3

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