I’m trying to figure out what interfaces to put inside the generics section of the open function from Angular’s CDK Dialog. Note that this is not angular material!!
This is what I have figured out so far
const dialogRef = this.dialog.open<IResult, unknown, IInputData>(FooComponent, {
width: '350px',
data: { x: 10 } as IInputData
})
dialogRef.closed.subscribe((data: IResult) => { ... }
As you can see I already figured out 2 generics (the first and the last). But it is still unclear what the middle generic should be. So, because generics aren’t mentioned in the documentation I checked out the interface of open which is
open<R = unknown, D = unknown, C = unknown>(component: ComponentType<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;
open<R = unknown, D = unknown, C = unknown>(template: TemplateRef<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;
open<R = unknown, D = unknown, C = unknown>(componentOrTemplateRef: ComponentType<C> | TemplateRef<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;
It is generic D that I’m interested in. Its used in DialogConfig which looks like this
/** Configuration for opening a modal dialog. */
export declare class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet = BasePortalOutlet> {
...
/**
* Providers that will be exposed to the contents of the dialog. Can also
* be provided as a function in order to generate the providers lazily.
*/
providers?: StaticProvider[] | ((dialogRef: R, config: DialogConfig<D, R, C>, container: C) => StaticProvider[]);
/**
* Component into which the dialog content will be rendered. Defaults to `CdkDialogContainer`.
* A configuration object can be passed in to customize the providers that will be exposed
* to the dialog container.
*/
container?: Type<C> | {
type: Type<C>;
providers: (config: DialogConfig<D, R, C>) => StaticProvider[];
};
...
Here is where I’m lost. Any suggestions what D might be?
>Solution :
D is the type of the data being injected into the child component. As per the source:
/** Data being injected into the child component. */
data?: D | null = null;