15

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

the_mesh
  • 53
  • 6
Lijin Durairaj
  • 4,910
  • 15
  • 52
  • 85
  • 4
    `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. –  Nov 19 '18 at 12:28
  • so if we have a simple dom like this<\span>then we have to use elementRef and if we have a template like this
    something here
    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     – Lijin Durairaj Nov 19 '18 at 12:37
  • 1
    in HTML it gives `
    Some content
    `. 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](https://angular.io/api/core/ElementRef), [TemplateRef](https://angular.io/api/core/TemplateRef) and [structural directives](https://angular.io/guide/structural-directives) mght help you.     –  Nov 19 '18 at 12:42
  • 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 – Lijin Durairaj Nov 19 '18 at 12:49
  • You're getting away from your original question here. Don't make it an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) : tell me what you are trying to achieve, I'll tell you how to do it. –  Nov 19 '18 at 12:50
  • 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() – Lijin Durairaj Nov 19 '18 at 12:55
  • 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. –  Nov 19 '18 at 12:58
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183887/discussion-between-lijin-durairaj-and-trichetriche). – Lijin Durairaj Nov 19 '18 at 12:58

2 Answers2

22

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

Mike
  • 809
  • 6
  • 20
Sheik Althaf
  • 1,595
  • 10
  • 16
3

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.

Pang
  • 9,564
  • 146
  • 81
  • 122
shubham soni
  • 41
  • 4