title: How to create an attribute-directive in Angular 2 and bind it to a property?
body: <p>I want to create a custom attribute-directive and bind this to a property. I plan to retrieve this attribute and get the value later on.</p>
  
  <p>I created a Directive:</p>
  
  <pre><code>@Directive({ 
      selector: '[data-url]' 
  })
  
  export class DocumentURL{
      constructor(private el: ElementRef, private renderer: Renderer) { }
  }
  </code></pre>
  
  <p>this is the component that uses the directive:</p>
  
  <pre><code>@Component({
      templateUrl: 'some.component.html',
      directives: [DocumentURL]
  })
  </code></pre>
  
  <p>this is my some.component.html:</p>
  
  <pre><code>&lt;div class="col-xs-6" [data-url]='docUrl' (mouseleave)='onMouseLeave($event)'&gt;
  </code></pre>
  
  <p>However, it is throwing an error saying that:
  Can't bind to 'data-url' since it isn't a known native property</p>
  
  <p>Can someone help please? thanks.</p>