How do I pass input parameters for a component when using mdl custom dialog?

Question

Here is the tutorial code to create a custom dialog from the official angular-mdl website.

let pDialog = this.dialogService.showCustomDialog({
  component: LoginDialogComponent,
  providers: [{provide: TEST_VALUE, useValue: 'Just an example'}],
  isModal: true,
  styles: {'width': '350px'},
  clickOutsideToClose: true
});

Now, if I add some @Input() parameters to LoginDialogComponent, e.g. @Input() requireCaptcha: boolean;

How can I pass parameters there?

Answer 1

You can't use @Input in your case because this would require an element where you can pass your requireCaptcha value.

The intention is to use the providers Array to pass values to your dialog component. First of all create an InjectionToken:

export const REQUIERE_CAPTCHA = new InjectionToken<boolean>('requireCaptcha');

Then in your showCustomDialog method use:

let pDialog = this.dialogService.showCustomDialog({
  component: LoginDialogComponent,
  providers: [{provide: REQUIERE_CAPTCHA, useValue: true}],
  isModal: true,
  styles: {'width': '350px'},
  clickOutsideToClose: true
});

Now you can access the REQUIERE_CAPTCHA in your dialog component:

constructor(
    private dialog: MdlDialogReference,
    @Inject( REQUIERE_CAPTCHA) requireCaptcha: boolean) {

console.log(requireCaptcha);

}