title: Equivalent of restrict: AE in Angular2
body: <p>In Angular 1, you could use <code>restrict</code> to determine how your directive could be used. For example:</p>
  
  <pre><code>angular.module('foo').directive('fooDirective', [function () {
    return {
      restrict: 'AE',
      /* ... */
    }
  }]);
  </code></pre>
  
  <p>And then you would be able to use this in your template either as an attribute or as an element:</p>
  
  <pre><code>&lt;foo /&gt;
  </code></pre>
  
  <p><strong>OR</strong></p>
  
  <pre><code>&lt;div foo /&gt;
  </code></pre>
  
  <p>I've been reading on sites such as <a href="https://angular.io/docs/ts/latest/guide/attribute-directives.html" rel="nofollow">this one</a> that in Angular2, the <code>select</code> proper way to define how your component is used now:</p>
  
  <pre><code>@Component({
    selector: 'Sample'
  });
  </code></pre>
  
  <p>Then in your template:</p>
  
  <pre><code>&lt;Sample /&gt;
  </code></pre>
  
  <p>Similarly, adding brackets allows it to be used as an attribute:</p>
  
  <pre><code>@Component({
    selector: '[Sample]'
  });
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div Sample /&gt;
  </code></pre>
  
  <p>But what if I want to allow it to be used both as an attribute and as an element, the equivalent of <code>restrict: 'AE'</code> in Angular 1?</p>