Equivalent of restrict: AE in Angular2

Question

In Angular 1, you could use restrict to determine how your directive could be used. For example:

angular.module('foo').directive('fooDirective', [function () {
  return {
    restrict: 'AE',
    /* ... */
  }
}]);

And then you would be able to use this in your template either as an attribute or as an element:

<foo />

OR

<div foo />

I've been reading on sites such as this one that in Angular2, the select proper way to define how your component is used now:

@Component({
  selector: 'Sample'
});

Then in your template:

<Sample />

Similarly, adding brackets allows it to be used as an attribute:

@Component({
  selector: '[Sample]'
});

Template:

<div Sample />

But what if I want to allow it to be used both as an attribute and as an element, the equivalent of restrict: 'AE' in Angular 1?

Answer 1

You can use

@Component({
  selector: 'sample,[Sample]'
});

See also https://github.com/angular/angular/blob/60727c4d2ba1e4b0b9455c767d0ef152bcedc7c2/modules/angular2/src/common/forms/directives/ng_form.ts#L81 for an example

@Directive({ selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]',