title: Difference between ElementRef and TemplateRef in angular4
body: <p>i have seen many examples of ElemenetRef and TemplateRef which got me more confused.</p>
  
  <ol>
  <li>what is the difference between ElementRef and TemplateRef why we should use one over another</li>
  </ol>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ng-template #element&gt;
    &lt;div style="border:solid 3px yellow;width:250px;
  height:250px;position:relative;top:0px;"&gt;
      this is my element
    &lt;/div&gt;
  
  &lt;/ng-template&gt;
  &lt;ng-container #template&gt;
  
  &lt;/ng-container&gt;
  </code></pre>
  
  <p><strong>.ts file</strong></p>
  
  <pre><code>@ViewChild('element', { read: TemplateRef }) element: TemplateRef&lt;any&gt;;
    @ViewChild('template', { read: ViewContainerRef }) template: ViewContainerRef;
  
   ngAfterViewInit() {
      this.template.createEmbeddedView(this.element);
    }
  </code></pre>
  
  <p>now if i change the above code to use ElementRef then also it works fine</p>
  
  <pre><code>@ViewChild('element', { read: ElementRef }) element: ElementRef;
  </code></pre>
  
  <p>so my question is why should i use TemplateRef if i can acheive the same with the use of ElementRef</p>