Stack Overflow
Stack Overflow

Questions tagged [angular-renderer2]

The Renderer2 class is an abstraction provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM directly.

Extend this base class to implement custom rendering. By default, Angular renders a template into DOM. You can use custom rendering to intercept rendering calls, or to render to something other than DOM.

85 questions
30
votes
2 answers

Angular 5 access divs list using @ViewChildren

I want to fetch all divs starting with the id 'div'. To do so, i use @ViewChildren but i'm not able to access the divs because i have an empty array , why ? My template
Div 1
Div 2
lory
  • 635
  • 2
  • 10
  • 20
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
10
votes
2 answers

What is the difference between an Attribute and a Property in HTML?

I have created a custom form control (using ControlValueAccessor) for input element, having following code for the writeValue method. @ViewChild('inputElement', {static: true}) input; writeValue(obj: any): void { …
Dulanjaya Tennekoon
  • 2,408
  • 1
  • 18
  • 31
8
votes
1 answer

What is the right way to implement a 3rd party library that manipulates the Dom?

I am using a 3rd party library to render a widget onto the screen (Okta's SignInWidget). The way the widget is rendered is so: this.oktaSignInWidget.renderEl( { el: '#widget-container' }, () => {}, err => { console.error(err); …
Doug S.
  • 682
  • 1
  • 10
  • 26
6
votes
3 answers

More than one class on Renderer.addClass()

How do I add more than just one class on the method Renderer2.addClass(); Example: this.renderer.addClass(this.el.nativeElement, 'btn btn-primary') When I try to do so I get the error: ERROR DOMException: Failed to execute 'add' on 'DOMTokenList':…
Felipe Bento
  • 83
  • 1
  • 2
  • 8
6
votes
0 answers

Angular 6 : Renderer 2 - rendering custom components using Renderer2 is not working

I have one custom angular component Its content is not rendering in the browser, when it is appended into DOM via Renderer2. Please find the following code that I am using to render the custom angular 6 component via…
Reshma Reghunatha Panicker
  • 1,091
  • 10
  • 22
4
votes
1 answer

How to set a directive and property binding on an element created with Renderer2

I want to implement a directive called "upload-file" that would be applied on a The directive should add a hidden and when the button is clicked the …
Nicolae Daian
  • 1,065
  • 3
  • 18
  • 39
4
votes
2 answers

invokeElementMethod in Renderer2 angular

Context Angular project I have the following snippet: export class OnlyNumberDirective { constructor(private _el: ElementRef,private renderer:Renderer2) { } @HostListener('input', ['$event']) onInputChange(e) { …
Mostafa Saadatnia
  • 802
  • 8
  • 20
4
votes
2 answers

Showing Title string/templateRef Angular

I am trying to improve my code rather than having conditions, so I decided to create a directive or maybe a pipe if possible that could help me print the title of a tab depending on its type (string or templateRef), my code is the following, this…
Youness Houdass
  • 204
  • 4
  • 15
4
votes
0 answers

When loading same component with different data, old data still showing - Angular 5

In an Angular 5 app I am building, I have a side menu and main content menu. Two of the menu items on the left load the same component with different route data. By default, Angular uses the same component instance to render both. Hence, the…
Bill
  • 2,026
  • 9
  • 55
  • 99
3
votes
1 answer

Set focus on input field with renderer2

I have a button like below which opens a modal when I press "space" and I want to set focus on a input field like below
Shuvo Barua
  • 105
  • 2
  • 10
3
votes
1 answer

How to append after last child element with Angular Renderer2?

I'm trying to append a button after an input field with an Angular7 directive. The problem is that the Renderer2 method appendChild is placing the button before the input field. Button before input field image import { Directive, ElementRef, Input ,…
Nikolay Stefanov
  • 63
  • 2
  • 6
3
votes
2 answers

How to add multiple styles to the native element in Angular

I'm trying to add multiple styles to the native element in angular, currently using the renderer2 API. I've a requirement in which the styles will change dynamically and it can have many styles. That's why I'm not using the class…
Aditya Gaur
  • 43
  • 1
  • 1
  • 6
3
votes
1 answer

Angular - Renderer2 : How to Set Attribute without value?

There is a post on Set Attribute Without value which provides a good solution using $('body').attr('data-body',''); However, in my current ionic project, I am using Angular's Renderer2 API to manipulate DOM, and I have a requirement to create a…
Neeraj Jain
  • 7,643
  • 6
  • 34
  • 62
3
votes
3 answers

Angular 2+ CSS Custom Properties (variables) with Renderer

I'm trying to convert Vanilla JavaScript code to Angular 2+. In Javascript, I have a statement like this: document.documentElement.style.setProperty(`--${cssVariableName}`, value); In Angular, the only way I've found to replicate the above…
Link79097
  • 68
  • 3
  • 6
1
2 3 4 5 6