title: angular: Calling el.setAttribute results in an error
body: <p>I'm trying to set a new attribute (defined as <strong>'data-num'</strong>) within each element (labeled as <code>el</code>) referring to <strong>[ngDN]</strong> (as an instance of the directive <code>NgDNDirective</code>).</p>
  
  <h2>Concept:</h2>
  
  <p>The code below explains how <code>NgDNDirective</code> is intended to work:</p>
  
  <ol>
  <li><p>TS part:</p>
  
  <pre><code>import { Directive, Input, ElementRef, Renderer2, EventEmitter } from '@angular/core';
  
  @Directive({
    selector: '[ngDN]'
  })
  export class NgDNDirective {
  
    private dn: number = -1
  
    @Input() set ngDN(dn: number) {
      this.dn = dn
    }
  
    @Input() set EV(ref: {ev: EventEmitter&lt;void&gt;}) {
      ref.ev.subscribe(() =&gt; {
        console.log('data-num:', this.dn)
        this.renderer.setAttribute(this.elRef, 'data-num', this.dn.toString())
      })
    }
  
    constructor(private elRef: ElementRef,
                private renderer: Renderer2) {}
  
  }
  
  @Directive({
    selector: '[ngLoop]'
  })
  export class NgLoopDirective {
  
    @Input() set ngLoop(iter_count: number) {
      this.container.clear()
      for (let i=0; i&lt;iter_count; i++) {
        let ee: EventEmitter&lt;void&gt; = new EventEmitter&lt;void&gt;()
        let ref = {ev: ev}
        let ev = this.container.createEmbeddedView(this.template, {index: i, ev: ref})
        ev.detectChanges()
        ee.emit()
      }
    }
  
    constructor(private template: TemplateRef&lt;any&gt;,
                private container: ViewContainerRef) {}
  
  }
  </code></pre></li>
  <li><p>HTML part:</p>
  
  <pre><code>&lt;ng-template [ngLoop]="10" let-i="index" let-ref="ev"&gt;
    &lt;a href="#" [ngDN]="i" [EV]="ref"&gt;&lt;/a&gt;
  &lt;/ng-template&gt;
  </code></pre></li>
  </ol>
  
  <h2>Problem:</h2>
  
  <p>After running the test, the console shows me the following information:</p>
  
  <blockquote>
    <p>data-num: 0</p>
    
    <p>ERROR TypeError: el.setAttribute is not a function Stack trace:
    ../../../platform-browser/@angular/platform-browser.es5.js/DefaultDomRenderer2.prototype.setAttribute@<a href="http://localhost:8888/vendor.bundle.js:78803:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:78803:13</a>
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:66266:9
    set/&lt;@<a href="http://localhost:8888/main.bundle.js:869:17" rel="nofollow noreferrer">http://localhost:8888/main.bundle.js:869:17</a>
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:56260:36
    ../../../../rxjs/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub@<a href="http://localhost:8888/vendor.bundle.js:1558:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1558:13</a>
    ../../../../rxjs/Subscriber.js/SafeSubscriber.prototype.next@<a href="http://localhost:8888/vendor.bundle.js:1505:17" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1505:17</a>
    ../../../../rxjs/Subscriber.js/Subscriber.prototype._next@<a href="http://localhost:8888/vendor.bundle.js:1445:9" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1445:9</a>
    ../../../../rxjs/Subscriber.js/Subscriber.prototype.next@<a href="http://localhost:8888/vendor.bundle.js:1409:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1409:13</a>
    ../../../../rxjs/Subject.js/Subject.prototype.next@<a href="http://localhost:8888/vendor.bundle.js:1153:17" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1153:17</a>
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:56234:54
    set@<a href="http://localhost:8888/main.bundle.js:928:17" rel="nofollow noreferrer">http://localhost:8888/main.bundle.js:928:17</a>
    updateProp@<a href="http://localhost:8888/vendor.bundle.js:63715:5" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:63715:5</a>
    checkAndUpdateDirectiveInline@<a href="http://localhost:8888/vendor.bundle.js:63407:19" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:63407:19</a>
    checkAndUpdateNodeInline@<a href="http://localhost:8888/vendor.bundle.js:64945:17" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:64945:17</a>
    checkAndUpdateNode@<a href="http://localhost:8888/vendor.bundle.js:64884:16" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:64884:16</a>
    debugCheckAndUpdateNode@<a href="http://localhost:8888/vendor.bundle.js:65745:38" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65745:38</a>
    debugCheckDirectivesFn@<a href="http://localhost:8888/vendor.bundle.js:65686:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65686:13</a>
    View_HomeComponent_4/&lt;@ng:///AppModule/HomeComponent.ngfactory.js:121:9
    debugUpdateDirectives@<a href="http://localhost:8888/vendor.bundle.js:65671:12" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65671:12</a>
    checkAndUpdateView@<a href="http://localhost:8888/vendor.bundle.js:64851:5" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:64851:5</a>
    callViewAction@<a href="http://localhost:8888/vendor.bundle.js:65216:21" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65216:21</a>
    execEmbeddedViewsAction@<a href="http://localhost:8888/vendor.bundle.js:65174:17" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65174:17</a>
    checkAndUpdateView@<a href="http://localhost:8888/vendor.bundle.js:64852:5" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:64852:5</a>
    callViewAction@<a href="http://localhost:8888/vendor.bundle.js:65216:21" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65216:21</a>
    execComponentViewsAction@<a href="http://localhost:8888/vendor.bundle.js:65148:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65148:13</a>
    checkAndUpdateView@<a href="http://localhost:8888/vendor.bundle.js:64857:5" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:64857:5</a>
    callViewAction@<a href="http://localhost:8888/vendor.bundle.js:65216:21" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65216:21</a>
    execEmbeddedViewsAction@<a href="http://localhost:8888/vendor.bundle.js:65174:17" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65174:17</a>
    checkAndUpdateView@<a href="http://localhost:8888/vendor.bundle.js:64852:5" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:64852:5</a>
    callViewAction@<a href="http://localhost:8888/vendor.bundle.js:65216:21" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65216:21</a>
    execComponentViewsAction@<a href="http://localhost:8888/vendor.bundle.js:65148:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65148:13</a>
    checkAndUpdateView@<a href="http://localhost:8888/vendor.bundle.js:64857:5" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:64857:5</a>
    callWithDebugContext@<a href="http://localhost:8888/vendor.bundle.js:66071:39" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:66071:39</a>
    debugCheckAndUpdateView@<a href="http://localhost:8888/vendor.bundle.js:65611:12" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:65611:12</a>
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:62782:9
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:57420:58
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:57420:13
    next/&lt;@<a href="http://localhost:8888/vendor.bundle.js:57297:100" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:57297:100</a>
    ../../../../zone.js/dist/zone.js/http://localhost:8888/polyfills.bundle.js:2936:17
    onInvoke@<a href="http://localhost:8888/vendor.bundle.js:56503:24" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:56503:24</a>
    ../../../../zone.js/dist/zone.js/http://localhost:8888/polyfills.bundle.js:2935:17
    ../../../../zone.js/dist/zone.js/http://localhost:8888/polyfills.bundle.js:2686:24
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:56434:54
    next@<a href="http://localhost:8888/vendor.bundle.js:57297:70" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:57297:70</a>
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:56248:36
    ../../../../rxjs/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub@<a href="http://localhost:8888/vendor.bundle.js:1558:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1558:13</a>
    ../../../../rxjs/Subscriber.js/SafeSubscriber.prototype.next@<a href="http://localhost:8888/vendor.bundle.js:1505:17" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1505:17</a>
    ../../../../rxjs/Subscriber.js/Subscriber.prototype._next@<a href="http://localhost:8888/vendor.bundle.js:1445:9" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1445:9</a>
    ../../../../rxjs/Subscriber.js/Subscriber.prototype.next@<a href="http://localhost:8888/vendor.bundle.js:1409:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1409:13</a>
    ../../../../rxjs/Subject.js/Subject.prototype.next@<a href="http://localhost:8888/vendor.bundle.js:1153:17" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:1153:17</a>
    ../../../core/@angular/core.es5.js/http://localhost:8888/vendor.bundle.js:56234:54
    checkStable@<a href="http://localhost:8888/vendor.bundle.js:56468:13" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:56468:13</a>
    onLeave@<a href="http://localhost:8888/vendor.bundle.js:56547:5" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:56547:5</a>
    onInvokeTask@<a href="http://localhost:8888/vendor.bundle.js:56497:17" rel="nofollow noreferrer">http://localhost:8888/vendor.bundle.js:56497:17</a>
    ../../../../zone.js/dist/zone.js/http://localhost:8888/polyfills.bundle.js:2968:17
    ../../../../zone.js/dist/zone.js/http://localhost:8888/polyfills.bundle.js:2736:28
    ../../../../zone.js/dist/zone.js/http://localhost:8888/polyfills.bundle.js:3043:24
    invokeTask@<a href="http://localhost:8888/polyfills.bundle.js:3915:9" rel="nofollow noreferrer">http://localhost:8888/polyfills.bundle.js:3915:9</a>
    globalZoneAwareCallback@<a href="http://localhost:8888/polyfills.bundle.js:3933:17" rel="nofollow noreferrer">http://localhost:8888/polyfills.bundle.js:3933:17</a></p>
  </blockquote>
  
  <p>This means that the injected instance of Renderer2 from <code>NgLoopDirective</code> to <code>NgDNDirective</code>, comes without <code>setAttribute</code> method. Why does this occur?</p>
  
  <h2>Further informations:</h2>
  
  <blockquote>
    <p>ng -v
        _                      _                 ____ _     <strong>_    / \   _ __   __ _ _   _| | __ _ _ __     / <em></strong>| |   |</em> <em>|   / △ \ | '</em> \ / _<code>| | | | |/ _</code> | '<strong>|   | |   | |    | |  / <em></strong> \| | | | (</em>| | |<em>| | |
    (</em>| | |      | |<strong><em>| |</em></strong> | | /<em>/   __| |</em>|__, |__,<em>|</em>|__,<em>|</em>|<br>
    ____|_____|<strong><em>|
                   |</em></strong>/ @angular/cli: 1.2.3 node: 6.11.0 os: linux x64 @angular/animations: 4.3.3 @angular/common: 4.3.3 @angular/compiler:
    4.3.3 @angular/core: 4.3.3 @angular/forms: 4.3.3 @angular/http: 4.3.3 @angular/platform-browser: 4.3.3 @angular/platform-browser-dynamic:
    4.3.3 @angular/router: 4.3.3 @angular/cli: 1.2.3 @angular/compiler-cli: 4.3.3 @angular/language-service: 4.3.3</p>
  </blockquote>