Dynamically added Angular2 component doesn't get rendered but the statically added does

Question

I'm executing the following method when the user clicks a button.

@ViewChild("privs") privs: ElementRef;
addPrivs() {
  this.privs.nativeElement
    .insertAdjacentHTML('beforeend', '<generic1>yey!</generic1>');
}

My markup looks like this.

<generic1>woosh</generic1>
<div #privs></div>

The subcomponent named generic1 is declared like this and, of course, present in imports of the module.

import { Component } from "@angular/core";
@Component({
  selector: "generic1",
  template: "<div>mamba...</div>"
})
export class Generic1 { }

The behavior I'm getting is that the statistically created one in the markup shows as supposed to. The dynamically appended don't. According to the DOM as I investigate, a tag generic1 is added but it's not rendered by Angular (I see the text yey! and the tag but not the rendition of the component).

What am I missing?

I've googled for examples but didn't see anything specifically wrong with my set up. Must be something outside of my scope...

score 2 · Accepted Answer · edited May 23 '17 at 11:46

You are not actually creating a dynamic component. You are inserting additional HTML that is not rendered by Angular. Html and text are sanitized when inserting them into a template like that and thus you won't get a rendered component.

This answer has a very detailed explanation of setting up dynamic components. However, it is not a copy and paste solution for what you need. The documentation on Angular.io has a good example of a dynamic component loader. Essentially, you will need a ComponentFactoryResolver to resolve and build an Angular component. In the example from the Angular.io docs, the real magic happens in this function:

loadComponent() {
    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
    let adItem = this.ads[this.currentAddIndex];
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component);
    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = adItem.data;
  }

It retrieves a component from a list of stored components in this.ads, uses a componentFactoryResolver to resolve and build the component. It retrieves the viewContainerRef and creates the component on it.

Hope that helps point you in the right direction.

Dynamically added Angular2 component doesn't get rendered but the statically added does

1 Answers1