Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to use generics with Angular CDK's Dialog.open<?????>

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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;
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading