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

Tooltip as dynamic component

I want to add tooltip to the svg element, but as a component created dynamically. I add the tooltip to the element, using TooltipDirective on svg element i.e. chartElement…
0
votes
1 answer

Angular 6 How to add and remove class using Angular Renderer2

I am trying to use angular Renderer2 to add and remove a class in HTML template. Here I am facing the difficulties: to add the class once component will load Only the selected item should have the class I have created a demo in stackblitz. Please…
0
votes
1 answer

How does angular reactive form input values affect dom?

I'm building an angular(reactive forms) 6/7 UI wizard app. This app will be used on an ecommerce platform (ex. Shopify, WordPress) to replace the platform's default product page. The app uses angular material radio inputs to record choices and set…
0
votes
2 answers

Angular 6 Renderer2/3 - how to add class to element?

//Parent Component html:
0
votes
1 answer

Angular Renderer2 setStyle only if specific class present on host

I have a (spinner) directive that may add/remove a class (.spinner) using @HostBinding. It also adds/removes an img (spinner.gif) when activated. If .spinner is present on the host, a bunch of styles defined in the scss file are applied: .spinning…
kmansoor
  • 4,265
  • 9
  • 52
  • 95
0
votes
1 answer

Need more clarity on `renderer2` with directive

In my directive I added a event listener like this: //this is works by default this.el.nativeElement.onfocus = function(e){ that.warpper.classList.add("show"); } //this is works not works default this.el.nativeElement.onblur = function(e){ …
3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
0
votes
1 answer

How to Apply styled using Renderer2 to a child node of ElementRef -> nativeElement in Angular

Suppose I have the following Angular Template:

{{ someBinding2 }}

Arjun Panicker
  • 730
  • 1
  • 8
  • 20
0
votes
1 answer

Added a button in the textarea through renderer2 in a directive, but it isn't visible in the browser, though I can see it in console

i am trying to add a button to a textarea dynamically through renderer2, in a directive. But the button is not visible. Below is my directive code- @Directive({ selector: '[appMain]' }) export class MainDirective { @Input() initial: string;…
Anand Bhushan
  • 765
  • 8
  • 18
-1
votes
2 answers

How to set class on clicked element using Angular Renderer2

i have an angular click event attached on span in my component's html Something and in my component i want to perform some operation and than add a class to this span using renderer2's addClass method. I…
Haris Jamil
  • 133
  • 1
  • 10
-1
votes
2 answers

Angular 4 adding an image before each new line using renderer

I am trying to add an image before each new line. So I am able to achieve this Apple Ball Cat Dog but I want to add image before in every new line (img) Apple (img) Ball (img) Cat (img) Dog The code this.tooltipTitle =…
Enthu
  • 512
  • 2
  • 13
  • 38
1 2 3 4 5
6