title: Angular2 insert custom attribute in tag with directive
body: <p>I have an angular 2 project and I'm using PrimeNG.
  I'm using a special tag with a lot of custom attributes and these attributes are always the same for this tag.
  I want to externalize these attributes and I created a custom directive used to add all attributes I need.
  The problem is that some of these attributes aren't native and maybe they aren't recognized. I get the error "Failed to execute 'setAttribute' on 'Element': '[myCustomAttribute]' is not a valid attribute name.</p>
  
  <p>This is my directive:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Directive({
    selector: '[def-calendar]'
  })
  export class DefaultCalendarDirective {
  
    constructor(private _elRef: ElementRef, private _renderer: Renderer2) {
    }
  
    ngOnInit() {
      this._renderer.setAttribute(this._elRef.nativeElement, '[yearRange]', '1900:2100');
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone know how can I fix it? 
  I don't know if is there a way to copy the element such as string and manipulate the string adding my attributes.</p>
  
  <p>Thanks
  Fabrizio</p>