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
3
votes
1 answer

ngStyle VS Renderer2 ? What should I use?

I'm using Angular 5.2.9. I was wondering when should I use Renderer2 over ngStyle ? Which is the best solution ? 1:
FOO BAR
@ViewChild('div') div: ElementRef; constructor(private renderer: Renderer2) {} ngAfterViewInit() { …
bossno
  • 587
  • 6
  • 12
2
votes
2 answers

How to update the styles of @ViewChildren (Or @ContentChildren) in Angular(v14)

I'm trying to create a carousel component that has n amount of child components based on whatever size list it will get. I want the parent (carousel) to control the styling for children as it manipulates the size of the list and track the indexes to…
lowkey
  • 41
  • 6
2
votes
1 answer

How to create an Angular directive that combines multiple templates?

I am trying to create a custom directive that will allow me to read a template from a json / ts object and insert it in my directive template. For example, in a config file / database / ts file, I have: { //... text: '

Many of our tools ...AD…

Jeff
  • 4,285
  • 15
  • 63
  • 115
2
votes
0 answers

Using renderer2 to access native element

Is there any difference in these two methods of accessing native element from security perspective? SomeDirective implements OnInit{ constructor( elementRef : ElementRef, renderer : Renderer2){} ngOnInit(){ //method 1 const el1 =…
IdoAmar
  • 21
  • 4
2
votes
2 answers

Adding directive to an element using Renderer2

I have a directive that implements a slider when you hover the element, If you visit this site when you hover the image the directive makes other images absolute to the main one and enables arrows for sliding to next image, The only problem is that…
Behnam Aminazad
  • 411
  • 2
  • 5
  • 19
2
votes
1 answer

renderer2 append child node after parent node

I want to append new child node after the parent node but appendChild appends it inside of it. Here is what I have: My component.html:
parent node
My component.ts: private appendChild() { …
cheshire
  • 1,109
  • 3
  • 15
  • 37
2
votes
2 answers

Angular Styles are not applying to renderer2 created elements

Inside app component import { Component, ViewChild, Renderer2, ElementRef } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) //I'm using renderer2 inside…
user14321799
2
votes
2 answers

Renderer2 selecting element by selectRootElement make it's content disappear

When trying to create a tab component using Renderer2 to select a tab element, and try to add some css class to change color for example for selected tab that is currently not selected, the HTML element disappear completely from DOM: Here is the tab…
HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
2
votes
2 answers

Renderer2 error - id did not match any elements

So I have an input field which I would like to focus on load in an Angular application. I read that the Renderer2 way is the good method of doing so, and it works if I call the function for example on click like so: focusMyInput() { …
Smithy
  • 807
  • 5
  • 17
  • 43
2
votes
1 answer

How do I add an attribute to a dynamically created element in Angular2+?

I have had a look at this but it does not work -- maybe because the elements I am targeting are dynamically generated inside a custom component (). I have also had a look at this but this wouldn't work, I think, as i am not able to touch the…
PakiPat
  • 1,020
  • 14
  • 27
2
votes
1 answer

Apply a directive on a DOM element using getElementById in angular 7

I have some HTML generated by a third party (plotly), and I would love to apply a directive that we already have on one of the DOM elements it creates. The directive opens a colorPicker on click and sets colors to strings. I can reach the element…
Skarlinski
  • 2,419
  • 11
  • 28
2
votes
1 answer

Wrong coordinates of HTML elements obtained in components

I've added a custom tooltip to an SVG chart within gridster item (all examples are provided on stackblitz). Tooltip (div) coordinates are obtained using nativeElement and set using the Renderer2 (trivial example - tooltip div is offset by 20px).…
Gitnik
  • 564
  • 7
  • 26
2
votes
1 answer

Angular structural directive and Renderer2

I have a custom checkbox directive that adds styling in the traditional label/span style as well as some other functionality. It injects the wrapper around itself and the span alongside. I just realized that when placed in a structural directive…
Anthony
  • 7,638
  • 3
  • 38
  • 71
2
votes
2 answers

Appending HTML snippet to the view in Angular 6

I am getting a piece of html code from a http request to an external system , and I should show this on my view in my angular app to be percise this is the html snippet that I have to show (it will be a bit different by every request and response…
Yashar
  • 1,122
  • 2
  • 15
  • 43
2
votes
1 answer

Decoupling my Angular 6 directive from the DOM

I have made a Snap-to-Component Directive that works great in Firefox, unfortunately, it's tightly coupled to the DOM which is really not 'de Angular wey'. How do I decouple this? I've looked into Renderer2 which will be phased out by Ivy but…
imnickvaughn
  • 2,774
  • 9
  • 25
  • 42
1
2
3 4 5 6