title: Angular 4 - get ViewRef of current component
body: <p>How can i get the <code>ViewRef</code> of my current <code>component</code> -</p>
  
  <p>I am trying to get <code>ViewRef</code> from a service. Here is the code -</p>
  
  <p><em>component.service.ts</em></p>
  
  <pre><code>import { Injectable, ViewRef } from '@angular/core';
  
  @Injectable()
  export class CheckboxService{
  
  constructor(private viewRef: ViewRef){
  }
  
  getViewRef(){
      return this.viewRef;
  }
  }
  </code></pre>
  
  <p><em>component.ts</em></p>
  
  <pre><code>import { Component, EventEmitter, Output, ViewChild, ViewRef } from 
  '@angular/core';
  import { AddFormDirective } from '../../add-form/add-form.directives';
  import { CheckboxService } from './checkbox.service';
  
  @Component({
  selector: 'ang-checkbox',
  templateUrl: './checkbox.component.html'
  })
  
  export class CheckboxViewComponent {
  
  @ViewChild(AddFormDirective) addFormDirective: AddFormDirective;
  
  constructor(private checkboxService: CheckboxService){
  }
  
  remove_element(){
      let viewContainerRef = this.addFormDirective.viewContainerRef;
      let currentComponentIndex = 
      viewContainerRef.indexOf(this.checkboxService.getViewRef());
      viewContainerRef.remove(currentComponentIndex);
  }
  }
  </code></pre>
  
  <p>I get following error -</p>
  
  <blockquote>
    <p>No provider for ViewRef!</p>
  </blockquote>
  
  <p>What is the best way to get <code>ViewRef</code> of current component?</p>