Dynamically append data inside <div> angular6

Question

I have a template : <div class='somedata'></div> I want to append a list of <div> dynamically one after the other . Data i fetch using a shared service through a Subject .

For Example :

<div class='somedata'>
<div id='dynamicdata1'>some data</div>
<div id='dynamicdata2'>some data</div>
..
..
..
</div>

dynamicdata1 , dynamicdata2 etc arrive one after the other with some delay .

Initially i thought of using an ngFor to render the div, but everytime i push a data into the ngFor bound variable , the loop runs again due to angular's changeDetection .

Is there any way this can be solved without using *ngFor ?

I know there is a way using jQuery where we can use $(selector).append() but is there anyway this can be done in angular?

Thanks ,

Answer 1

Following my comment, here is an example of a custom trackBy function :

<div *ngFor="let x of y; trackBy: customTB"></div>


customTB(index, item) {
  return item.id;
}

If the value returned by your function doesn't change, then the items won't move from your view when it is updated. So by giving new items to your array, and by returning only their ID, you will append items to the arrat, without moving the others.

Answer 2

You can use innerHTML to append some data into HTML element as per your requirements.