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

Claraclarabella

ElementRef refers to an element of the DOM, whereas TemplateRef represents an embedded template (usually a component template). So to summarize, the template ref can contain several element refs, but the element ref can not contain a template ref. – Shabby

so if we have a simple dom like this<span><\span>then we have to use elementRef and if we have a template like this <div><div><div>something here</div></div></div> then we have to use templateRef, right? if yes, then what can a templateRef do which a elementRef cannot, can u please give me a brief idea, i am not able to find anythign online regarding this – Claraclarabella

in HTML it gives <app-my-component #templateRef><div #elementRef>Some content</div></app-my-component>. The template reference is to be used only with view container references, most of the time in structural directives (directives like *ngFor or *ngIf that manipulate the DOM directly). The documentation about ElementRef, TemplateRef and structural directives mght help you. – Shabby

now viewContainerRef also has a createEmbeddedView() method same as the templateRef. then why should i use templateRef when i can use viewContainerRef and get the element using elementRef – Claraclarabella

You're getting away from your original question here. Don't make it an XY problem : tell me what you are trying to achieve, I'll tell you how to do it. – Shabby

i just want to know what is the advantage of using templateRef over elementRef. basically what all can a templateRef do other than having a createEmbeddedViewMethod() – Claraclarabella

They have different purposes. Unless you give some context, you won't have an answer. For instance, do you want to color some text, or do you want to hide information to non-authed users ? You must have a purpose : tell me what it is, and I'll tell you which one is suited. But saying templateRef is better than ElementRef because ... isn't possible, because they both serve different purposes. – Shabby

Let us continue this discussion in chat. – Claraclarabella

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

Tannenbaum

@trichetriche, can u please command on this answer and let me know if it is correct, thanks – Claraclarabella

Answer 2

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.

Environmentalist