CODEWITHSUNDEEP
javascriptangular
user3384985
user3384985

Reputation: 3017

Angular 4 - get innerHTML of ComponentRef in Dynamic Component

I have been trying to integrate dynamic component.

Angular documentation

It's done except with a silly issue. Every time in my dynamic component an array of [object object] along with HTML elements.

In console, within hostview there is a rootNodes where innerHTML exists.

What is the way to get innerHTML within rootNodes?

Here is the Angular code -

    let factory = this.factoryResolver
        .resolveComponentFactory(TextFieldViewComponent);
    let component = factory
        .create(viewContainerRef.parentInjector);
    console.log(component);
    let componentView = viewContainerRef.insert(component.hostView);

Here componentView is the output HTML elements with [object object]

EDIT 1:

Here is the output of my dynamic component

enter image description here

EDIT 2:

Here is the template of dynamically added component -

<md-list-item>
<div class="formfield-wrapper">
    <div class="formfield-view">
        <label></label>
        <md-input-container>
            <input type="text" mdInput disabled placeholder="Textfield" value="">
        </md-input-container>
    </div>
    <div class="formfield-options">
        <md-icon>settings</md-icon>
        <md-icon>remove</md-icon>
    </div>
</div>
<input type="hidden" name="textfield-label[]" value=""/>
<input type="hidden" name="textfield-placeholder[]" value=""/>
<input type="hidden" name="textfield-required[]" value=""/>
<input type="hidden" name="textfield-required-msg[]" value=""/>
</md-list-item>

In my console - I see the object array is being shown after my dynamic component selector. Like -

<ang-textfield>...HTML elements...</ang-textfield>[object object]

Upvotes: 0

Views: 2999

Answers (2)

Arsalan Saleem
Arsalan Saleem

Reputation: 361

this is the way you extract dom element from component factory, not sure if you still needed it, but for anyone else looking for it.

const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

Thanks.

Upvotes: 3

joshrathke
joshrathke

Reputation: 7774

If I understand you right you are trying to pass HTML into your dynamically generated component? If so, you can use the instance() property to directly pass data into the component as if it was an input.

The component factory will return a ComponentRef which is a direct reference the component created. So you'll need to use the available methods and properties to access it.

For example:

component.instance['innerHTML'] = "<div>Some HTML</div>";

Once injected into the component you should have access to that data as if it were an @Input().

@Input() innerHTML: string;

Upvotes: 0

Related Questions