Difference between ElementRef and TemplateRef in angular4

Question

i have seen many examples of ElemenetRef and TemplateRef which got me more confused.

1. what is the difference between ElementRef and TemplateRef why we should use one over another

HTML

<ng-template #element>
  <div style="border:solid 3px yellow;width:250px;
height:250px;position:relative;top:0px;">
    this is my element
  </div>

</ng-template>
<ng-container #template>

</ng-container>

.ts file

@ViewChild('element', { read: TemplateRef }) element: TemplateRef<any>;
  @ViewChild('template', { read: ViewContainerRef }) template: ViewContainerRef;

 ngAfterViewInit() {
    this.template.createEmbeddedView(this.element);
  }

now if i change the above code to use ElementRef then also it works fine

@ViewChild('element', { read: ElementRef }) element: ElementRef;

so my question is why should i use TemplateRef if i can acheive the same with the use of ElementRef

Answer 1

ElementRef is simply like document.getElementById('myId');

Using ElementRef you are only able to do some decorations

TemplateRef is an embedded template which you can use in ViewContainerRef.createEmbeddedView to create Embedded View.

*ngFor is doing the same, it reads the element as a TemplateRef and injects mutiple times to create view with data

TemplateRef cannot be used as an element for css decorations in .ts