title: Cannot read property 'nativeElement' of undefined - ngAfterViewInit
body: <p>I'm trying to add a "clipboard" directive using <a href="https://stackoverflow.com/a/36330518/3935156">this example</a>. The example is now outdated so I have had to update how it is getting the nativeElement.</p>
  
  <p>I'm getting the error </p>
  
  <blockquote>
    <p>Cannot read property 'nativeElement' of undefined</p>
  </blockquote>
  
  <p>I have marked the error in the code with &lt;===== error here:</p>
  
  <p><strong>clipboard.directive.js</strong></p>
  
  <pre><code>import {Directive,ElementRef,Input,Output,EventEmitter, ViewChild, AfterViewInit} from "@angular/core";
  import Clipboard from "clipboard";
  
  @Directive({
    selector: "[clipboard]"
  })
  export class ClipboardDirective implements AfterViewInit {
    clipboard: Clipboard;
  
     @Input("clipboard")
     elt:ElementRef;
  
    @ViewChild("bar") el;
  
    @Output()
    clipboardSuccess:EventEmitter&lt;any&gt; = new EventEmitter();
  
    @Output()
    clipboardError:EventEmitter&lt;any&gt; = new EventEmitter();
  
    constructor(private eltRef:ElementRef) {
    }
  
    ngAfterViewInit() {
      this.clipboard = new Clipboard(this.el.nativeElement, {   &lt;======error here
        target: () =&gt; {
          return this.elt;
        }
      } as any);
  
      this.clipboard.on("success", (e) =&gt; {
        this.clipboardSuccess.emit();
      });
  
      this.clipboard.on("error", (e) =&gt; {
        this.clipboardError.emit();
      });
    }
  
    ngOnDestroy() {
      if (this.clipboard) {
        this.clipboard.destroy();
      }
    }
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div  class="website" *ngIf="xxx.website !== undefined"&gt;&lt;a #foo href="{{formatUrl(xxx.website)}}" target="_blank" (click)="someclickmethod()"&gt;{{xxx.website}}&lt;/a&gt;&lt;/div&gt;
                                          &lt;button #bar [clipboard]="foo" (clipboardSuccess)="onSuccess()"&gt;Copy&lt;/button&gt;
  </code></pre>
  
  <p>How do I get rid of that error?</p>
  
  <p><strong>Updated to not use AfterViewInit because it is not a view...same error:</strong></p>
  
  <pre><code>@Directive({
    selector: "[clipboard]"
  })
  export class ClipboardDirective implements OnInit {
    clipboard: Clipboard;
  
     @Input("clipboard")
     elt:ElementRef;
  
    @ViewChild("bar") el;
  
    @Output()
    clipboardSuccess:EventEmitter&lt;any&gt; = new EventEmitter();
  
    @Output()
    clipboardError:EventEmitter&lt;any&gt; = new EventEmitter();
  
    constructor(private eltRef:ElementRef) {
    }
  
    ngOnInit() {
      this.clipboard = new Clipboard(this.el.nativeElement, {
        target: () =&gt; {
          return this.elt;
        }
      } as any);
  </code></pre>
  
  <p>I think I need to not use @viewChild because it is not a component but am unsure how to populate <code>el</code> or <code>eltRef</code>. <code>el</code> is only there to replace <code>eltRef</code> because I couldn't populate <code>eltRef</code>.</p>