Difference between ElementRef and TemplateRef in angular4

ElementRef

  1. Used for basic DOM abstraction.

  2. We can access basic native element present in DOM.

TemplateRef

  1. Used to access DOM element within template.

  2. Structural directive uses this TemplateRef.


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