0

It's very complicate to add this new dialog, it's the only component I'm not able to add myself.

  1. I don't know if I need to add something to my app.module.ts
  2. How create this dialog? I really don't understand there is a lot information Dialogreference

I need to set it once? on my root component or what ? because it won't work I can add it to my constructor once I have "no provider MdlDialogReference" once I have "no all parameters (?)".

Actual code:

FILE app.component.ts 

constructor( private vcRef: ViewContainerRef,
               private dialog: MdlDialogReference,  private dialogService: MdlDialogService, private httpService: HttpService, private communicationInsideServices : CommunicationInsideServices, private  activatedRoute : ActivatedRoute, private router : Router) {

  }

  get viewContainerRef() {
    return this.vcRef;
  }

Is there error? because this won't load my app, And how can I call this dialog into another child component?

halfer
  • 19,824
  • 17
  • 99
  • 186
istiti
  • 141
  • 1
  • 11
  • why do you add MdlDialogReference as a dependency? would you like to present your appcomonent as dialogcontent? – michael Oct 04 '16 at 10:33
  • thanks a lot , I do not know what does MdDialogReference, no i don't want app component as my dialogcontent, do I need import something into my app.mobule.ts where there is my bootstrap ngModule to get this dialog works ? Because it won't work or I'm using it wrongly, if you have a clear plunkr demo, it is welcome – istiti Oct 04 '16 at 10:43
  • I clean all my code and juste add to my component in my constructor : `constructor(private dialogService: MdlDialogService)` and in ngAfterViewInit `let result = this.dialogService.alert('This is a simple Alert'); result.then( () => console.log('alert closed') );` I get this error ` TypeError: Cannot read property 'parentInjector' of undefined` – istiti Oct 04 '16 at 10:49
  • A plunkr would be great. Here is a template http://plnkr.co/edit/I3dLfLUDIH2xlEJqj0da?p=preview – michael Oct 04 '16 at 11:30
  • @michael sorry here you are maybe a little approach what I'm doing http://plnkr.co/edit/bTFKPBvLR19pdXGsil5g?p=preview – istiti Oct 05 '16 at 09:33

1 Answers1

0

You were close to the solution! It is important to specify a ViewContainerRef where the dialog is attached to. Please have a look at this working plnkr (http://plnkr.co/edit/HgAvCnzkWAmK1NVxfEUM?p=preview) in the app.component.ts:

constructor(private dialogService: MdlDialogService,
  private viewContainerRef: ViewContainerRef){
    dialogService.setDefaultViewContainerRef(viewContainerRef);
}

This only needs to be done once. It is possible to provide the viewConatinerRef to each showCustomDialog call but it is easier to do it once in the contructor of your root application. There should be an error message that informs you about this missing information (will be fixed in an upcoming release).

Update for version 2.0.0: You no longer need to call setDefaultViewContainerRef manually. Just add a dialog-outlet element to your html file: This way:

<html>
  <head>...</head>
  <body>
    <app-root>...</app-root>
    <dialog-outlet></dialog-outlet>
  </body>
</html>
michael
  • 16,221
  • 7
  • 55
  • 60