Allow custom config to be passed into the modal template ref for use in components

Currently it is possible to be reusing the same template over again across multiple components for modals. It would be good to support passing in a config object into the modal context used for binding reusable properties.

For example, I would like to be able to do this

<template #myModalTemplate let-c="close" let-d="dismiss" let-config="modalContext">
  <my-component [customProp1]="config.prop1" [customProp2]="config.prop2" (close)="c($event)" (dismiss)="d($event)"
</template>

in order to extract my common template & config into a reusable component.

[PEsteves8]

Personally, I would also like to have the options of passing in values when opening a modal from its template reference. For organization purposes sometimes I do prefer to have the <template> in the same place as the component that opens it, but at the same time I would prefer not to pollute the components properties with some values that are really only relevant for the modal when it opens. It’s not a big deal, though.

Another issue that I had and maybe this is due to the lack of proper design or knowledge of the library, I was going to open a modal using the ElementRef, but ended up making use of the component approach, by creating a component and passing it instead. The problem was that I wanted that component to use the same service instance as the component that triggers the opening of the modal, but I got the error ‘no provider for the service’, so I had to add the service to the providers array of the modal component, which felt unnecessary, since it was already provided in the module to which the main component belonged to.

[dneuer]

const modalRef = this.modalService.open(MyComponetWithContentForModal); modalRefComponentInstance.customProp1 = modalContext.prop1;

@pkozlowski-opensource isn’t that racy, though? What if the component can’t do anything useful without customProp1? I understand that ngOnInit is called after input properties are bound, but my assumption was that that only holds if angular creates the component through encountering it’s selector in markup. Am I misunderstanding? Is angular waiting around before calling ngOnInit even for components created from within event handlers, etc?