title: Selector in Directives
body: <p>The following directive should hide an element.</p>
  
  <pre><code>import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
  import {el} from "@angular/platform-browser/testing/src/browser_util";
  
  // Directive decorator
  @Directive({ selector: '[hide-me]' })
  // Directive class
  export class MyHiddenDirective {
  //  @Input() hideme:boolean;
    constructor(public el: ElementRef, public  renderer: Renderer2) {
      // Use renderer to render the element with styles
          renderer.setStyle(el.nativeElement, 'display', 'none');
  
    }
  }
  </code></pre>
  
  <p>I am using it as follows:</p>
  
  <pre><code>&lt;div&gt;Name: &lt;input hide-me #myint  type="text" name="name" [(ngModel)]="this.name" /&gt;  You entered {{this.name}} {{myint.hasAttribute('required')}}&lt;/div&gt;
  </code></pre>
  
  <p>Why does <code>selector: '[hide-me]'</code> work but <code>selector: 'hide-me'</code> doesn't? I do not use square brackes when I use the Directive <code>&lt;input hide-me...</code> and not <code>&lt;input [hide-me]...</code>. In Components, we generally specify selector without square brackets. Why do I need to specify square brackets in Directives?</p>