Insert DOM element on the specific index of parent DIV

There is a DIV in Angular template:

<div #parent [innerHTML]="content"></div> and in .ts file

let content = 'test1 test2 test3'

Now I'm creating new DIV:
const newDiv = this.renderer.createElement('div') as HTMLDivElement
newDiv.innerHTML = 'plug'
newDiv.addEventListener('click'......)

Goal is to have inside #parent: test1 <div>plug</div> test2 test3 and new div should have working listener.

How?

Manipulating innerHTML as string directly is not a solution: div exists but it is invisible for Angular engine.

Continue reading...