Monday, 28 January 2019

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 = "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);
});



from Angular 4 adding an image before each new line using renderer

No comments:

Post a Comment