InnerHtml inject static html with relative href

Question

I would like to insert this kind of code:

template = '<div style="background-image: url("/assets/images/hello_message.png");">TEST</div>'

but as soon as I inject it that way:

@ViewChild('root', { static: true }) element: HTMLDivElement;


ngOnInit(): void {
  this.element.nativeElement.innerHTML = this.template;
}

it's getting parsed as

<div style="background-image: url(" assets="" images="" hello_message.png");"="">TEST</div>

I'm aware it's not safe without any kind of sanitization but I would like to do it that way. How to do it?

A.khalifa · Accepted Answer · 2020-09-28 08:18:46Z

1

The solution that I found after a lot of work is to use Renderer2

So my code look like this

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

 templateUrl = 'url("/assets/images/hello_message.png")'
 templateDiv = '<div">TEST</div>'

    constructor(private elmRef: ElementRef, private renderer: Renderer2) {}
    
    ngOnInit(): void {
       this.element.nativeElement.innerHTML = this.templateDiv;
      this.renderer.setStyle(this.element.nativeElement, 'background-image',this.templateUrl)    
    }

The result

<div style="background-image: background-image: url("/assets/images/hello_message.png");>TEST</div>

2 option :

template = '<div style="background-image: url("/assets/images/hello_message.png");">TEST</div>'

  ngAfterViewInit() {
    this.renderer.setProperty(this.element.nativeElement, 'innerHTML', this.
template);
  }

Hope useful

edited Sep 28, 2020 at 8:18

answered Sep 27, 2020 at 20:34

A.khalifa

2,5063 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

InnerHtml inject static html with relative href

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related