Dynamic add component using gridstack and angular2? Jquery $.parseHTML does not work

angular, gridstack

Solution

The easist way to add `fancy-button` component dynamically might be as follows:

1) Add component to `entryComponents` array of your module

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, GridStackComponent, FancyButtonComponent ],
  entryComponents: [ FancyButtonComponent ], // <== here
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

2) Get root node from compiled component

constructor(private vcRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) { }

getRootNodeFromParsedComponent(component) {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
  const ref = this.vcRef.createComponent(componentFactory, this.vcRef.length, this.vcRef.injector);
  const hostView = <EmbeddedViewRef<any>>ref.hostView;
  return hostView.rootNodes[0];
}

3) Use it anywhere

const fancyBoxElement = this.getRootNodeFromParsedComponent(FancyBoxComponent);  
$('#someId').append(fancyBoxElement);

Here's Plunker Example for your case

If you're looking for something more complicated then there are a lot of answers where you can use angular compiler to do it working

- Load existing components dynamically Angular 2 Final Release

- Equivalent of $compile in Angular 2

- How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

- Angular 2.1.0 create child component on the fly, dynamically

- How to manually lazy load a module?

Problem

Original source

Related problems

• Equivalent of $compile in Angular 2
• How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
• How to manually lazy load a module?
• Load existing components dynamically Angular 2 Final Release
• Angular 2.1.0 create child component on the fly, dynamically