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

Asked Jan 31 '19 at 05:07

Active Jan 31 '19 at 07:50

Viewed 4,692 times

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.

edited Jan 31 '19 at 07:50

Jota.Toledo

27,293
11
59
73

asked Jan 31 '19 at 05:07

Reshma Reghunatha Panicker

1,091
10
22

ys.. div element.. within which we need to append this component – Reshma Reghunatha Panicker Jan 31 '19 at 06:16
1

Angular components wont be instantiated by the `Renderer2`. You can only use it in this way for creating HTML elements or web components. – Jota.Toledo Jan 31 '19 at 07:49
okay...thank you for the response...can you pls suggest some other method for solving this. – Reshma Reghunatha Panicker Jan 31 '19 at 09:09
See https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d – Jota.Toledo Jan 31 '19 at 09:14
much better method is to make it a web-component and just works. – gustavomick May 16 '20 at 00:18

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

0 Answers0