parent.appendChild is not a function

Question

I want to use the renderer2's append child function but I'm having some difficulties moving whole components. Here's a shortened versions of my component.

ts:

@ViewChild('test', { static: false }) test;
@ViewChild('test2', { static: false }) test2;

this.renderer.appendChild(this.test, this.test2);

html:

<div #test></div>

<my-component #test2></my-component>

So essentially I just want to move </my-component> into the div above it using the appendChild function. But when I execute it, I get the error:

parent.appendChild is not a function

Any ideas why it's erroring?

Answer 1

You should pass DOM elements to this method:

@ViewChild('test', { static: false }) test: ElementRef;
@ViewChild('test2', { static: false, read: ElementRef }) test2: ElementRef;
...

this.renderer.appendChild(this.test.nativeElement, this.test2.nativeElement);