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

Solution 1:

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

Solution 2:

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!

Solution 3:

You can use normal syntax for comments without special symbols like <!-- Order verification, and authorization -->, 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 %>'
        }]
      }
    },