Questions tagged [elementref]
78 questions
17
votes
2 answers
Difference between Renderer and ElementRef in angular 2
What is the difference between Renderer and ElementRef? In Angular both are used for DOM Manipulation. I am currently using ElementRef alone for writing Angular 2 directives. If I get more info about Renderer, I can use that in my future…

Niyaz
- 2,677
- 3
- 21
- 40
15
votes
2 answers
Difference between ElementRef and TemplateRef in angular4
i have seen many examples of ElemenetRef and TemplateRef which got me more confused.
what is the difference between ElementRef and TemplateRef why we should use one over another
HTML

Lijin Durairaj
- 4,910
- 15
- 52
- 85
8
votes
2 answers
angular templateRef nativeElement is an empty comment instead of original element
I am developing an angular directive that converts dropdownlist to radioListbox.
here is my initial code :
import { Directive, Input, TemplateRef, ViewContainerRef,OnInit } from '@angular/core';
@Directive({
selector: '[radioList]'
})
export…

theGhostN
- 342
- 7
- 20
7
votes
1 answer
How to fix @ViewChild ElementRef undefined in NativeScript Angular?
I am developing a mobile application with NativeScript (CLI v5.2.0) Angular (v7.2.3) and I have my @ViewChild ElementRef that was undefined.
I checked the presence of ViewChild and ElementRef in the import of "@angular/core", renamed my @ViewChild…

bgrand-ch
- 788
- 1
- 7
- 19
6
votes
1 answer
Need access to Angular 5 directive text
I'm trying to create a custom directive to replace the inner text of my custom directive. I can't seem to access the inner text content to apply some logic.
Here's the code:
import { Directive, ElementRef, Renderer2, ViewContainerRef } from…

Will
- 1,718
- 3
- 15
- 23
5
votes
1 answer
Angular 4 - How to apply the rendered height of a div to another div?
I have two named templates. I want to apply the height of the first one to the second one whenever the contents of the first one change. I can access both of them using ElementRef inside the component. So, when I change the properties bound to the…

Nimish David Mathew
- 2,958
- 6
- 29
- 45
4
votes
1 answer
ion-textarea resize height dynamically in Ionic 5
I am migrating my project from Ionc3 to Ionic5. I have an ion-textarea which increases the height as user types and it works in Ionic3. Following is the code.
HTML page:

Tapas Mukherjee
- 2,088
- 1
- 27
- 66
4
votes
2 answers
Setting (click) Attribute on Anchor Element
As I understand it it is not possible to dynamically add a '(click)' attribute to an element of the DOM using Renderer2 in Angular 2+.
If this is true how do you lovely people add a '(click)' attribute when they are dynamically creating HTML in the…

Mike Poole
- 1,958
- 5
- 29
- 41
4
votes
1 answer
ElementRef is undefined
I’m working in an angular 6 application. I have a textarea that I’d like to give focus to as soon as the page loads. I’m not able to do so.
Here is what the page looks like:
4
votes
6 answers
elementRef is null after building angular app
In a component template, i'm selecting an svg element with ElementRef. It works fine but when i build the app and open it elementRef is null.
@Component({
selector: 'app-svg',
template: `
3
votes
1 answer
Alternative of document.getElementsByTagName('body') in angular 2/5/6
I want to get the 'body' element form the other child component.
How can I get the body element form the child component?
As I want to append and remove the class to body form child component.

Shubham Ghormade
- 215
- 4
- 16
3
votes
1 answer
Error while using "ElementRef" in one of the service in angular
ERROR Error: Uncaught (in promise): Error:
StaticInjectorError(AppModule)[ElementRef]:
StaticInjectorError(Platform: core)[ElementRef]:
NullInjectorError: No provider for ElementRef! Error:…

Avinash.k
- 33
- 1
- 1
- 3
3
votes
1 answer
Angular get ElementRef of of the routerLinkActive
As in the title I need to get the ElementRef of the routerLinkActive in order to understand where I need to place an "ink Bar" (e.g. Material Design Tab) in the right position.
here I there is my sideNav menu

ALGDB
- 650
- 1
- 6
- 22
3
votes
2 answers
nativeElement object, DOM manipulation
I have just learnt that the keyword "nativeElement" is not cross browser compliant, e.g.:
let whatever = this.$elementRef.nativeElement;
whatever.style.display = 'none';
which is now corrected by using the render method like…

vicgoyso
- 636
- 1
- 14
- 35
2
votes
1 answer
Inheritance with ViewChild Angular 8
I'm trying to do inheritance with a class but if I use ViewChild I always get undefined. I'm going to show a simplification of my problem.
I have a parent class like this:
@Component({
selector: 'parent',
template: `
Hello {{name}}!

SantiSori
- 381
- 2
- 15