How can I set the value of a native element in Angular, using Renderer2?

Question

I'd like to set the innerText/innerHTML/textContent of a nativeElement?

this.render.setValue(this.nativeCloneLi.querySelector('.down .inn'), timeVal);

where timeVal is a string

the element is correctly selected, but setValue seems not working at all

How do you create `nativeCloneLi`? – ForestG Apr 04 '18 at 15:25 — ForestG, Apr 04 '18 at 15:25
Using an ElementRef **instance.nativeElement** – Donovant Apr 04 '18 at 23:52 — Donovant, Apr 04 '18 at 23:52

Tomasz Kula · Accepted Answer · 2018-04-06T13:42:03.567

35

You need to use renderer.setProperty() instead of renderer.setValue().

import { Component, Renderer2, AfterViewInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div #el></div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('el') el: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<h1>Hello world</h1>');
  }
}

Live demo

edited Apr 06 '18 at 13:42

answered Apr 04 '18 at 15:33

Tomasz Kula

16,199
2
68
79

Should we also use renderer if we just want to read a value on the native element, for instance const top = this._elementRef.nativeElement.getBoundingClientRect().top; – abyrne85 Oct 17 '18 at 11:09
@abyrne85 I'm also curious, should we use the renderer if we just want to read the element. – calbear47 Nov 29 '18 at 14:39
2

@abyrne85, @calbear47 No, there is no need to. `Renderer2` provides a API to manipulate native elements in platform agnostic manner. Meaning it's releasing you from direct DOM access and allowing you operate on it in abstract way. But as long as you only read and not changing anything you can use native element directly (if access to them is supported) or provide custom `Renderer2` implementation with features you are missing. Actually Angular doesn't provide any support (except `ElementRef` and [events](https://angular.io/api/core/Renderer2#listen)) to get anything from DOM. – Bardr Feb 07 '19 at 15:02

score 1 · Answer 2 · answered Jan 12 '20 at 12:02

I prefer it doing this way:

import { Component, Renderer2, AfterViewInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div #el></div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('el') el: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    const h1 = this.renderer.createElement('h1');
    const text = this.renderer.createText('Hello world');

    this.renderer.appendChild(h1, text);
    this.renderer.appendChild(this.el.nativeElement, div);
  }
}

How can I set the value of a native element in Angular, using Renderer2?

2 Answers2

Linked