Angular 6 : Renderer 2 - rendering custom components using Renderer2 is not working

Question

I have one custom angular component <sample-cmp></sample-cmp>

Its content is not rendering in the browser, when it is appended into DOM via Renderer2.

Please find the following code that I am using to render the custom angular 6 component via Renderer2

@ViewChild('formParent') 
public elmRef: ElementRef;  

constructor(public renderer: Renderer2) {

}

const domElm = renderer.createElement('sample-cmp');

renderer.appendChild(elmRef.nativeElement, domElm);

The above code will generate the below tag in UI.

<sample-cmp></sample-cmp>

But this 'sample-cmp' template contains 'Hello World' text and that is not rendered.

My issue is, When we render one custom component using Renderer 2 the content in the custom components template is not getting rendered.

Heated

ys.. div element.. within which we need to append this component – Heated

Angular components wont be instantiated by the Renderer2. You can only use it in this way for creating HTML elements or web components. – Affairs

okay...thank you for the response...can you pls suggest some other method for solving this. – Heated

See netbasal.com/… – Affairs

much better method is to make it a web-component and just works. – Chaucerian