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
0
votes
0 answers

Cannot get angular datatables th

I've created a button on the title of columns, but the title has the 'sorting' class, that sorts the registers when i click my custom button. I want to create new div at title and move the class to the new div. But I have problems accessing to the…
0
votes
0 answers

What is the safest way to perform an event from code in Angular?

When some data arrives from an API I need to perform a click event in my Angular app. It has to be done from typescript code. I use a component from an external library and it is the only way to make it work as I need. I used ViewChild as…
0
votes
1 answer

Is there a way to replace a class using renderer2 in angular

I am using angular 10 and using Renderer2 to add and remove classes: this.renderer.removeClass(this.document.body, 'signin-user'); this.renderer.addClass(this.document.body, 'anonymous-user'); Does Renderer2 let me replace a class. For e.g if…
Yogesh
  • 246
  • 1
  • 4
  • 20
0
votes
1 answer

Angular accessing function specified in renderer2 set property

I have a directive that replaces a table value with an "a href" using renderer.setProperty. Attached to the "a href" is a "click" property which im not sure how to access the function: "onClickAccountLink($event)" or add a programmatic function to…
hello world
  • 306
  • 1
  • 6
  • 28
0
votes
2 answers

Kill execution of a running script tag in Angular 11

Currently I have an Angular component that appends a list of script tags into the DOM with Renderer2 library, the code of these scripts is retrieved from an external source. In the following snippet, scripts array is the list of source links. Being…
Across
  • 63
  • 5
0
votes
1 answer

Can Angular's Renderer2.listen() have multiple targets?

I manually add and remove Eventlisteners on DOM-Elements for performance reasons from the ngZone in Angular. My implementation seems fine and I'm currently try to refactor code to keep it DRY and more readable. Now, my question is if there is a way…
0
votes
0 answers

Edit Canvas by Angular Renderer2 not working

When reading documentation of Angular I found an information stating that DOM Elements should be altered by the Renderer2 class. I tried to update my project where I used ViewChild directive, but this way is not working with HTML Canvas Elements,…
Kajetanoss
  • 159
  • 1
  • 2
  • 8
0
votes
0 answers

Angular renderer.setStyle() on renderer2 isn't working

i'm learning Angular, and i have an issue with renderer2, it seems the get is working fine and he gets to the function styleChoice with the right informations but the setStyle isn't working with the ngInit. I tried to await the function but it did…
0
votes
1 answer

How to update a dynamically created Angular Material Component's property binding (e.g. ProgressBar or Spinner)

Description I want to create and control a Material ProgressBar from within a directive. Problem I can't update the ProgressBar's value property (though everything else, for example the mode). Stackblitz:…
ddhille
  • 117
  • 1
  • 9
0
votes
1 answer

How to measure element width of an HTML element in Angular?

I want to dynamically create an element and then get its clientWidth. The code snippet looks like this using the regular DOM API. HTML Snippet:
The element has its css property visibility set to 'hidden'.…
0
votes
1 answer

Error when trying to use ViewChild annotation in Angular

I am trying to use ViewChild like this: @ViewChild('hello', { static: false }) divHello?: ElementRef; This is the template:
Some test data
But, the ViewChild annotation is showing this error: Unable to resolve…
joler-botol
  • 442
  • 1
  • 7
  • 22
0
votes
2 answers

Rendering SVGs using Renderer2 in Angular

How do I render an SVG (which I have locally stored in my project) using Renderer2 in Angular? I tried doing it like following: const div = this.renderer.createElement('div'); const svg =…
0
votes
1 answer

Set (click) attribute in button using renderer2 in Angular

I am trying to create a chat-based application where I am creating each type of chat popup according to requirements and using Angular Renderer2. I tried to add a (click) attribute to the chat message element while rendering that in UI. I got this…
0
votes
0 answers

Angular doesn't add ng-invalid when I add required on input element by Renderer2

I want to put the attribute "required" dynamically on an input text field using Renderer2. The attribute is added, but the field doesn't turn to invalid when the field is empty. I tried different ways that I list above, but nothing…
doinel
  • 87
  • 1
  • 9
0
votes
1 answer

Angular Material mat-slider with fixed thumblabel

I would like to use a mat-slider with a thumblabel that doesn't move along with the slider when it is moved. The way I see it the entire 'mat-slider-thumb-container' gets moved along the slider with the 'transform:translateX(xx%)' style So I would…