0

The answer is below

constructor(private http: HttpClient,private renderer:Renderer2) { }

//create the DOM element 
let li=this.renderer.createElement('li');

//create text for the element
const text = this.renderer.createText(data.message);

//append text to li element
  this.renderer.appendChild(li, text);

//Now append the li tag to divMessages div
this.renderer.appendChild(this.divMessages.nativeElement,li);

But i want to add nested html element like given below:

<div class="chat">

      <div class="chat-history">

      <div class="chat-message clearfix">

      <img src="http://gravatar.com/avatar/2c0ad52fc5943b78d6abe069cc08f320?s=32" alt="" width="32" height="32">

      <div class="chat-message-content clearfix">

          <span class="chat-time">13:37</span>

          <h5>Marco Biedermann</h5>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nulla accusamus magni vel debitis numquam qui tempora rem voluptatem delectus!</p>

      </div> <!-- end chat-message-content -->

  </div> <!-- end chat-message -->

How it will achieve? Is any method which create above html structure in short? or it will create one by one using this.renderer.createElement which is very repeated code.please help

For more, please check this URL https://stackblitz.com/edit/angular-lpxhab where after add input value can't get on enter

arun
  • 11
  • 7
  • Really do you want to create the widget using Rendered2? Why not use *ngFor, see https://angular.io/guide/structural-directives#structural-directives ? – Eliseo Dec 18 '18 at 17:35
  • Hi Eliseo, thanks for comment but when i use this it always show in string not in html form, could you have any other solution or i am missing something. – arun Dec 19 '18 at 14:41
  • https://stackoverflow.com/questions/31548311/angular-html-binding/41089093#41089093 ? – Eliseo Dec 19 '18 at 15:09
  • I tried it but problem is event capturing using inner html, that's why i need a proper solution.Thanks for your effort but i need still solution, i think you will got my problem. – arun Dec 19 '18 at 15:36

0 Answers0