CODEWITHSUNDEEP
javascriptangularjsangularcomments
Peter Carter
Peter Carter

Reputation: 2728

Commenting (out) code in Angular2 TypeScript

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:

Browser image

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?

Upvotes: 12

Views: 59182

Answers (3)

hannodb
hannodb

Reputation: 253

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

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

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

Upvotes: 23

Thierry Templier
Thierry Templier

Reputation: 202176

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

Upvotes: 3

Related Questions