Angular 4 adding an image before each new line usi

Question

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 = "Apple,Ball,Cat,Dog,Elephant"

create() {
  this.tooltip = this.renderer.createElement('div');
  this.tooltipTitle.split(',').forEach((text) => {
  this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
  this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
  this.renderer.appendChild(document.body, this.tooltip);
 });
}

this.renderer.addClass(this.tooltip,'classA')

 .classA{
   positon:absolute;
   max-width: 150px;
   font-size: 14px;
   color: black;
   padding: 3px 8px;
   background: grey;
   border-radius: 4px;
   z-index: 100;
   opacity: 0;
 }

So the addClass is adding styles to the whole tooltip.That is good and working what I am further trying is to add an image at beginning of new line as well

Edit

After trying a lot I am able to add the image "but" it is only getting added to the last value not to the previous values(whereas I want to add image on every new line), any help would be highly appreciated, please guide me

this.tooltip = this.renderer.createElement('div');
this.imgforres = this.renderer.createElement('img');
this.imgsrc = 
this.renderer.setAttribute(this.imgforres,"src",
"assets/images/restriction.png")

this.tooltipTitle.split(',').forEach((text) => {
this.renderer.appendChild(this.tooltip,this.imgforres);
this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
this.renderer.appendChild(document.body, this.tooltip);
});

Latest

Now I have achieved I get the image before every new line of text, Thanks to Yuri for his response One last glitch is if the text is long it surely wraps up but the indentation is not with the above line text, it starts below the image

<img> Apple
<img> Ball
<img> So this a long text
and it starts from below 
the image
<img> Cat

Expected

<img> Apple
<img> Ball
<img> So this a long text
      and it starts from 
      below the image
<img> Cat

I have tried word-break, justify , it's not helping , maybe I'll have to embed this text in a div or p tag and then give styling to those.Please suggest.

Answer 1

      this.tooltip = this.renderer.createElement('div');
      this.tooltipTitle.split(',').forEach((text) => {
      this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
      this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));

      var img2 = document.createElement('img'); // Use DOM HTMLImageElement
      img2.src = 'image2.jpg';
      img2.alt = 'alt text';
      this.renderer.appendChild(this.tooltip,img2);
      this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));

      this.renderer.appendChild(document.body, this.tooltip);
    });

Another layout

Answer 2

You can try something like this -

create(){
  this.tooltip = this.renderer.createElement('div');

    this.tooltipTitle.split(',').forEach((text) => {
      let container = this.renderer.createElement('div');
      let img = this.renderer.createElement('img');
      this.renderer.setAttribute(img, "src", "assets/images/restriction.png");
      this.renderer.appendChild(container, img);

      let textSpan = this.renderer.createElement('span');
      this.renderer.appendChild(textSpan, this.renderer.createText(text));
      this.renderer.appendChild(container, textSpan);

      this.renderer.appendChild(this.tooltip, container);
    });

    this.renderer.appendChild(document.body, this.tooltip);
}

In html, I kept an inline css which you can have in separate file and load it by calling this.renderer.addClass()

<style>
  span { 
    margin-left: 10px;
    display:inline-flex;
    width:150px;
    word-wrap:break-word;
} 
</style>

Here's my test tooltipTitles -

tooltipTitle = "Apple,Ball,Cat,Dog,Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant ";

And here's the output screenshot

Test Output