0

I want to show a dialog with angular2 as shown in this example: https://getmdl.io/components/index.html#dialog-section

Therefore I am using the dialog polyfill here: https://github.com/GoogleChrome/dialog-polyfill

This polyfill needs a dialog element right under the body. For this I created a wrapper component which is attached to the dialog tag itself. This component should be used only once within the application.

Component sample code(see all in plnkr below):

let factory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(type);
let injector = this.viewContainerRef.injector;
this.componentRef = this.viewContainerRef.createComponent(factory, 0, injector);

let dialogElement = this.el.nativeElement;

if (!dialogElement.showModal) {
  dialogPolyfill.registerDialog(dialogElement);
}

this.renderer.invokeElementMethod(dialogElement, 'showModal');

I am using a service with observables to let other components pass in components to show within the dialog.

As you can see in the plunker the content is not shown in the dialog but right underneath the dialog tag.

What part I am missing here?

What do I need to do to pass in arguments to the called component? e.g. when I want to ask the user to delete an entity I need to know the id of that entity.

Plnkr: http://plnkr.co/edit/zZYOcgxcRINx23JhuxOk?p=preview

Gambo
  • 1,572
  • 3
  • 26
  • 52

1 Answers1

2

Yes you're missing this thing:

@ViewChild('target', {read: ViewContainerRef}) target;

this.componentRef = this.target.createComponent(factory, 0, injector);

instead of injecting component next to host tag (viewContainerRef)

See working Plunker

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • Thank you very much! Do you have any suggestion how I could pass parameter for the created component as well? – Gambo Sep 13 '16 at 17:17
  • 1
    You can use `this.componentRef.instance.someProperty = value` – yurzui Sep 13 '16 at 17:20
  • http://stackoverflow.com/questions/37487977/passing-input-while-creating-angular-2-component-dynamically-using-componentreso – yurzui Sep 13 '16 at 17:21