How can I add a comment (for developers, not in output HTML) to an Angular template?

Question

I'm used to the more popular 'mustache' style templates where I can add a comment for my colleagues with:

{# The following code looks a bit odd, but here's why... #}

These comments obviously don't appear in the output - so users don't see them. How can I do something similar in Angular?

score 46 · Answer 1 · edited Oct 27 '15 at 14:13

46

Angular doesn't have template comment support built in. You could, however, create a comment directive to support it, like this.

app.directive('templateComment', function () {
    return {
        restrict: 'E',
        compile: function (tElement, attrs) {
            tElement.remove();
        }
    };
});

Markup would then be:

<template-comment>Put your comment here.</template-comment>

Alternately, you could use standard html comments, and then strip them out of your production code before deployment.

Consider this grunt task, if you'd like to support block comments - https://github.com/philipwalton/grunt-strip-code Specify a start comment and an end comment, and your comment block will be stripped out of the production code, assuming your add this task to your deploy target. Use it as a model for you build process, if you're not using Grunt. ....

edited Oct 27 '15 at 14:13

mit

11,083
11
50
74

answered Aug 05 '13 at 17:07

Pauli Price

4,187
3
34
62

2

I;m aware of the need to strip comments, hence mentioning it in the question you're responding to. And I minify when in production. But for a nice DOM during development, I'd like templating comments, hence asking about templating comments. I gather your answer means 'Angular doesn't do this, go somewhere else'. – mikemaccana Aug 06 '13 at 08:02
1

Updated answer with example directive that adds support for template comments. – Pauli Price Aug 06 '13 at 15:25
1

I upvoted but then had problems with it not working right for me. For @marfarma or others: have you used this and it removes the element like you want? – Daryn Jan 21 '14 at 21:27
1

I tested it before I posted the response and it worked. That was in an older angular release though. In what way was it 'not working right?' – Pauli Price Jan 22 '14 at 12:15
1

I used the above snippet in a previous project and it worked. However, I just tried to use it again in a new project (Angular 1.2.7) and it wasn't removing the comment at all. Not sure exactly why it stopped working... but changing `tElement.replaceWith('');` to `tElement.remove();` got it working again. – Benjamin Feb 06 '14 at 18:29
1

This didn't seem to work for me in angular v1.3.5. However, placing it in the `link` instead of `compile` function got it working – ragamufin Dec 09 '14 at 03:53
3

Note that depending what you're looking for, a grunt task is much more appropriate. The `templateComment` directive will still show up in the source HTML of your page, it will just be removed once Angular gets going in your browser. If you want to have the comment totally dropped (and also save on bandwidth), strip it from the code in your build process. – tobek Dec 24 '14 at 19:06
1

Won't this leave the comments in source? So if you choose 'view source' you will still see the comments. It's only if you inspect the page that the comments will be removed. – Jan Aagaard Jun 18 '15 at 14:41
1

@JanAagaard that's exactly the point. The OP asked for a way that html source comments would be stripped such that 'view source' on the rendered page, in the browser, would not display them. – Pauli Price Jun 18 '15 at 19:34
1

@marfarma: I created a Plunker to demonstrate what I mean: http://run.plnkr.co/plunks/dbvh9lC8MMFg6HZFFc9t/. If you choose view source on this page the template comment is visible. – Jan Aagaard Jun 19 '15 at 11:30

score 32 · Accepted Answer · answered Mar 12 '21 at 15:06

32

I realize it has been over 7 years since this question has been asked, but it is one of the top search results for "angular template comment" so here we go...

Since there still does not seem to be template syntax support for (non-html) comments the easiest way I found to do this is abusing the support for one line js comments in embedded expressions. Like this:

{{ '' // my comment }}

The empty string literal - which makes this even more ugly than it already is - is necessary because without it the angular compiler barfs out a 'ERROR in TypeError: Cannot read property 'visit' of undefined', at least with the 9.0.0 version I am on.

Yay web development in 2021!

answered Mar 12 '21 at 15:06

jpo

2,550
2
19
16

3

Thanks, while this may be ugly, it does exactly what I wanted, comments in the markup that will not be rendered. – Stuart Allen May 04 '21 at 15:41
This is perfect - ty – gdibble May 12 '21 at 00:01
well, this is my solution of choice – Ricardo Saracino May 31 '21 at 22:26
Wow thanks man, that is what I wanted, a faster way to do comments and without output even better – Oct 24 '21 at 01:59
Glad to have an option, although obviously not ideal. Better than nothing, I suppose. – Dale Harris Jul 28 '22 at 16:39
I haven't done Angular since....Angular was a thing but Stack Overflow seem to like this answer so I'm making it the accepted one. – mikemaccana May 23 '23 at 17:45

score 8 · Answer 3 · answered Aug 16 '16 at 09:21

You can use normal syntax for comments without special symbols like , then you can minify html (grunt + htmlmin)

htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true,
          removeComments: true,
          ignoreCustomComments: [ /[<>\:\[\]\#]+/ ]

        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/**/*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    },

score 0 · Answer 4 · answered May 29 '23 at 15:38

0

I recently had the same need, and did this:

<div ng-if="false">
  <!-- Your comment -->
</div>

It only produces the following output:

<!-- ngIf: false -->

answered May 29 '23 at 15:38

Fábio Alves Corrêa

1

How can I add a comment (for developers, not in output HTML) to an Angular template?

4 Answers4