100 questions
1
vote
1
answer
93
views
`this` not set to component instance when creating component programatically
I have a directive that reads src attribute and appends a DynamicComponent. It also sets an input property of DynamicComponent.
@Directive({
selector: '[appDynamic]'
})
export class InjectDirective {...
- 6,138
0
votes
0
answers
43
views
Using Renderer2 removeChild with parent set as null
I'm using Renderer2 to render some custom elements in an Angular application. As each element is created, it is stored as a constant:
const myNewElement = this.renderer2.createElement('div');
When ...
- 4,116
2
votes
1
answer
87
views
Why doesn't a component style apply to a dynamically inserted element?
I am programmatically appending a new element to an existing element in my component, but the styles associated with the .target class defined in the component's styles do not appear to apply to the ...
- 7,347
1
vote
2
answers
77
views
Remove element with class name
How can I remove the element that has the class loader?
<ngx-supp>
<div class="ngx-supp-class">
<div class="loader">...</div>
<div class="...
- 107
1
vote
1
answer
141
views
How to implement Renderer2 to make forms in Angular
I am developing an application, in Angular 15, that displays a form for a dynamic query. I get the form parameters from the Backend.
I get from back something like this
{
"codRespuesta": 0,...
1
vote
1
answer
177
views
Render2 not working in Angular basic project
I have an angular application angular-tour-of-heroes with the following structure:
src
->app
->your-component
->your-component.component.html
-&...
1
vote
1
answer
319
views
When to sanitize while using Angular Renderer2
When I create a text node inside Angular with a sanitized string I unexpectedly got html entities in the output. I commonly sanitize all my input before using it inside the Renderer2.
const text = '€£'...
- 44.9k
0
votes
0
answers
155
views
Angular Renderer listen() Function Not Working as Expected
I'm trying to add a click event to dynamically created components, but the renderer.listen function doesn't seem to be working as expected. Here's my code:
updateCardTemplate(arr: CardData[]) {
for (...
- 184
0
votes
2
answers
364
views
Script was added to the head , but when I deploy it after build, it was added twice and an error occurred
I am currently making and operating the web using the angular 11 version.
For page data analysis, I had to add marketing-related scripts to the head. When I searched it, I found out that I could add ...
- 1
0
votes
3
answers
2k
views
Cannot read properties of undefined (reading 'add') while adding a class through angular's renderer2
Here's my code:
@Directive({
selector: '[appDropdown]',
})
export class DropdownDirective {
isClassApplied: boolean;
@Input('appDropdown') className: string;
constructor(private renderer: ...
0
votes
1
answer
593
views
Clone a div with renderer 2 and angular
Good morning,
I am having a problem with viewchild which cannot find my selector in my html code. The goal is to look for my 'field' selector in my html to clone it and add a new class to it each time ...
4
votes
2
answers
3k
views
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 ...
- 90
2
votes
1
answer
544
views
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 ...
- 4,473
1
vote
2
answers
961
views
How to to listen to an html element that is outside angular app?
I have two HTML elements below,
<p #test>with reference</p>
<p id="with-id">need to access without template reference</p>
I know I can access the first P element ...
- 1,731
0
votes
0
answers
62
views
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 ...
1
vote
1
answer
1k
views
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 ...
- 344
0
votes
1
answer
945
views
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 ...
- 326
0
votes
2
answers
1k
views
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, ...
- 63
0
votes
1
answer
1k
views
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 ...
2
votes
0
answers
980
views
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 : ...
- 21
3
votes
2
answers
6k
views
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 ...
- 625
0
votes
0
answers
428
views
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 ...
- 159
0
votes
0
answers
2k
views
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 ...
- 3
0
votes
1
answer
361
views
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).
...
- 157
0
votes
1
answer
2k
views
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:
<div id="non-existent-element"></div&...
- 629
0
votes
1
answer
472
views
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:
<div class="wrap" #hello>
Some test data
</div>
But,...
- 462
0
votes
2
answers
1k
views
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 = this....
1
vote
1
answer
522
views
How to style placeholder of an element using custom directive in Angular 10?
I have a directive that uses Element Ref and Renderer 2 to style the element. I wanted to know how can I style placeholder using renderer or any other way in this directive.
Code
TextSizeDirective.ts
...
- 85
0
votes
1
answer
2k
views
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 ...
- 23
0
votes
0
answers
352
views
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 ...
- 97
1
vote
1
answer
602
views
Unable to bind Amazon Chime VideoTile to <video> in Angular
I'm creating angular client using Chime JS SDK. I'm able to create meeting and add attendees to the meeting. However there is no clear documentation on how to bind video tiles to UI on Angular. I'm ...
- 2,213
1
vote
1
answer
166
views
Angular 8 setting ngSstyle and reading offsetwidth gives old values
I am having trouble getting the correct values for a small custom context menu. When setting the styles via ngStyle. When doing it like below the componen will be rendered correctly, but the console....
- 1,151
0
votes
1
answer
3k
views
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 ...
- 131
0
votes
0
answers
1k
views
Set an attribute binding with Renderer2 and setProperty() on created element
I create a new element in the DOM with
const newTag = this.renderer2.createElement('g', 'http://www.w3.org/2000/svg');
Then I would like to add a bind attribute with
this.renderer2.setProperty(newTag, ...
- 419
0
votes
1
answer
2k
views
angular event listener document loaded
I am trying to select all pre elements in an angular component AFTER the document has been loaded.
ngAFterViewChecked, ngAfterContentChecked, ngAfterContentInit basically run 30 times before the ...
- 4,135
3
votes
1
answer
3k
views
Set focus on input field with renderer2
I have a button like below which opens a modal when I press "space"
<button type="button" (keydown.space)="openLg()" class="btn btn-link"></button>
...
- 107
0
votes
1
answer
728
views
Angular renderer setStyle will not apply linear-gradient
Angular's renderer2 will not apply linear-gradient CSS. Can anyone see what I'm missing?
export class AppComponent implements OnInit {
constructor(private renderer: Renderer2, private elementRef: ...
- 6,048
0
votes
1
answer
2k
views
Sending Data to an Angular Tooltip Directive
I have found an example online of a Tooltip directive. I need to expand it so I can pass data to the tooltip and render it in an *ngFor. So far I have
app.component.html
<div tooltipDirective [...
- 1,025
2
votes
4
answers
8k
views
Angular: How to add global CSS, but only for one specific page?
How can I add separate CSS for one page in Angular?
I've discounted both of the standard solutions to this problem:
Using ::ng-deep or ViewEncapsulation.None. CSS added in this way won't be removed ...
- 3,636
2
votes
1
answer
3k
views
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:
<div id="parent" (click)="appendChild()"&...
- 1,159
2
votes
2
answers
2k
views
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....
user14321799
0
votes
1
answer
1k
views
migrate from renderer to renderer2
I migrated an project from Angular 7 to 8 and I had to change the Renderer class to Renderer2 and I am facing the following error:
ERROR Error: Template error: Can't bind to 'disabled' since it isn't ...
- 65
1
vote
1
answer
1k
views
Renderer2, RendererFactory2 in tests fails - TypeError: Cannot read property 'createElement' of undefined
I have a preferences service in an angular 9 application that create a script tag it use 'createElement' From Renderer2.
When I try to mock the Renderer2 the createElement is not recognized.
This my ...
- 73
0
votes
1
answer
1k
views
Dynamically add a div to elements with the same class using Angular
I need to add a div with class '.cart-list-value .delete-product', that contains a background image, to all elements that have the class .cart-list-item. I was able to get all the elements with class ....
0
votes
1
answer
476
views
Close action menu item for table row in Angular
I have the following code for opening and closing a slide menu for each row in the table. The <td> is as shown below:
<td class="rm-release_table-cell" *ngIf="settings.actions&...
- 4,802
1
vote
1
answer
2k
views
How to use DOM click() in Angular using Renderer2
I have a method that gets invoked based on certain user action. In that method I am trying to download a file using this approach.
But I don't want to use/refer document object directly so I am using ...
- 1,384
3
votes
2
answers
7k
views
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 ...
- 9,848
1
vote
2
answers
4k
views
Can Angular Renderer2 setStyle function operate on an element where the style attribute is not yet defined?
In an Angular application let's suppose we have a body element as
<body>
...
</body>
and now I want to set its background to some value using Angular Renderer2 as
this.renderer....
- 225
1
vote
1
answer
609
views
How to handle errors thrown by render2 in Angular?
I'm working on this and can't think of a way to handle the error thrown by renderer2.selectRootElement.
This is what my function looks like:
private doSomeAnimation(){
const modalWrapper = this....
- 5,013
2
votes
2
answers
3k
views
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 ...
- 847