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
1
vote
2 answers

How to to listen to an html element that is outside angular app?

I have two HTML elements below,

with reference

need to access without template reference

I know I can access the first P element with the template reference with renderer2 but I am not sure how I access the second P…
anonymous
  • 1,499
  • 2
  • 18
  • 39
1
vote
1 answer

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 import { Directive, ElementRef, Input, OnInit,…
manu george
  • 55
  • 1
  • 3
  • 11
1
vote
1 answer

Unable to bind Amazon Chime VideoTile to

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 trying this on videoTileDidUpdate event: const…
Chandra Eskay
  • 2,163
  • 9
  • 38
  • 58
1
vote
1 answer

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.log will show the wrong values (-9999px) for the…
denns
  • 1,105
  • 1
  • 11
  • 24
1
vote
4 answers

Angular: How to add global CSS (e.g. to the body), but only for one specific page?

How can I add separate CSS for one page in Angular? This is the CSS I need, as per How to remove the URL from the printing page?: @media print{ @page{ margin:0; } body{ margin:30px; } } But putting CSS into the…
Eliezer Berlin
  • 3,170
  • 1
  • 14
  • 27
1
vote
1 answer

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 service.ts : @Injectable() export class MyServer…
Amirak
  • 63
  • 1
  • 8
1
vote
1 answer

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 combination of Renderer2 and ElementRef. This is…
Aakash Goplani
  • 1,150
  • 1
  • 19
  • 36
1
vote
1 answer

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.renderer2.selectRootElement('.modal-wrapper',…
HenryDev
  • 4,685
  • 5
  • 27
  • 64
1
vote
0 answers

Wait on element resize done after changing width trough renderer

Is there a way to detect when an html element (native element) is done with resizing after the style: width property has been changed trough the use of the angular renderer2? I have currently implemented a font sizing system based on the width of…
Moepkid
  • 11
  • 3
1
vote
1 answer

Renderer2 not working while inheritance in angular7

I need to access dom element and manipulate in other class homeComponent.ts import{TableUtility} from "src/shared/table-utility"; export class HomeComponent extends TableUtility{ constructor(){super()} homeComponent.html
pjay
  • 385
  • 1
  • 3
  • 19
1
vote
1 answer

Angular selectRootElement Works With App Not With Test

My Angular application requires that data be passed to the root component on the page in the following manner: After doing lots of research, I decided against using ElementRef to…
user1100412
  • 699
  • 1
  • 10
  • 22
1
vote
1 answer

Angular Renderer2 remove listener leaves EventListeners in memory - memory leak?

I have 3 event listeners in directive which i add and remove on button toggle and remove private addListeners() { this.mouseLeaveFunc = this.renderer.listen(this.el.nativeElement, 'mouseleave', () => { }); this.mouseEnterFunc =…
Vytautas Pranskunas
  • 772
  • 12
  • 23
1
vote
1 answer

Angular 5 remove class from siblings

I am trying to create a navbar with multiple hyper links in angular. I want to add class 'active' on click/hover of any of the hyper links and remove 'active' class from its siblings. I am trying to do this by creating a custom directive. This is…
Piyush Kumar
  • 481
  • 1
  • 6
  • 17
0
votes
2 answers

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 scripts to components using rederer2 and Inject,…
BrownLee
  • 1
0
votes
3 answers

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: Renderer2, private elRef: ElementRef) { …
Shubham Maheshwari
  • 118
  • 1
  • 13
1 2
3
4 5 6