CODEWITHSUNDEEP
angularangular-directive
Maihan Nijat
Maihan Nijat

Reputation: 9354

How to set HTML content in the ElementRef (nativeEelement)?

I want to set the content of HTML element with directive.

export class AdvertisementDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.background = 'yellow';
    el.nativeElement.content = '<p>Hello World<p>';
  }

}

But it does not work and doesn't give any error.

The idea behind doing this is to have Ad code in the directive and set it wherever I used directive attribute. The code for advertisement contains JavaScript and HTML code.

Upvotes: 10

Views: 30398

Answers (3)

SiddAjmera
SiddAjmera

Reputation: 39432

DOM Manipulations via directly changing properties on the nativeElement is not considered as a good practice. It's also not going to work in some cases like Web Workers and Server Side Rendering using Angular Universal.

A safer way of doing this is using Renderer2.

import { ..., AfterViewInit, ElementRef, ViewChild, Renderer2, ... } from '@angular/core';
...
export class AdvertisementDirective implements AfterViewInit {

  @ViewChild('templateRefName') el: ElementRef;

  constructor(
    private renderer: Renderer2
  ) {
  }

  ngAfterViewInit() {
    this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow');
    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<p>Hello World<p>');
  }

}

And in template:

<div #templateRefName></div>

Upvotes: 24

Muhammad Abdullah
Muhammad Abdullah

Reputation: 4515

Appending text can also be achieved by using createText property of renderer2 object.

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


export class AdvertisementDirective {

  @ViewChild('templateRefName') el: ElementRef;

  constructor(
    private renderer: Renderer2
  ) {
  }

  ngOnInit() {

   const text = this.renderer.createText('Hello World'); // <-- TO Be Noted
    this.renderer.appendChild(this.el.nativeElement, text);

  }

}

Upvotes: 0

Maihan Nijat
Maihan Nijat

Reputation: 9354

Just fixed it with the following:

el.nativeElement.innerHTML = '<p>Hello World<p>';

I realized the nativeElement should accept all the JavaScript methods as it is native HTML element.

Upvotes: 1

Related Questions