Angular 2 Component: How to select an HTML comment

Question

In AngularJS (1.x) we can define a directive in an HTML comment:

<!-- directive: my-directive-name -->

See How to set up attributes in angularjs directive restricted to comments

How can I do this in an Angular 2 component selector (there is no restrict: 'M' option)?

Update: See this SO question How to remove/replace the angular2 component's selector tag from HTML, it seems that replace is also gone...

Answer 1

This is not possible in Angular 2. Angular 2 is meant for modern browsers only (support for IE9+), so components are meant to be defined using custom Html elements which works well on all modern browsers.

Answer 2

You cannot do it within a comment but you should try have a look at templates, specifically <template>:

Template Syntax

You can use it like this:

      `<template ngFor #item [ngForOf]="items" #i="index">
        <option *ngIf="isSelected(item)" [value]="item.value" selected>{{item.label}}</option>
        <option *ngIf="!isSelected(item)" [value]="item.value">{{item.label}}</option>
      `</template>

You can use that in the template/HTML of your component. You'll still have to create your component with HTML tags like <my-component></my-component> but the <template> tags won't render. Might help.