Typed NgbModalRef

[michaeljota]

Feature request:

When you open a modal from the component, you can access to the modal reference. Currently, if you try to access to the componentInstance is typed as any. Same goes with result, and the argument of close() method, both typed as any. Typescript 2.8 introduced conditional types and one of the helper types introduced was InstanceType<>, is a generic type that allows to refer to the instance type of a constructor. With that, is easy to type componentInstance.

Minimal changes required:

I'll show how I edit the definitions files to accomplish that goal.

// modal.d.ts
...
/**
 * A service to open modal windows. Creating a modal is straightforward: create a template and pass it as an argument to
 * the "open" method!
 */
export declare class NgbModal {
    private _moduleCFR;
    private _injector;
    private _modalStack;
    constructor(_moduleCFR: ComponentFactoryResolver, _injector: Injector, _modalStack: NgbModalStack);
    /**
     * Opens a new modal window with the specified content and using supplied options. Content can be provided
     * as a TemplateRef or a component type. If you pass a component type as content than instances of those
     * components can be injected with an instance of the NgbActiveModal class. You can use methods on the
     * NgbActiveModal class to close / dismiss modals from "inside" of a component.
     */
    open<T extends new (...args: any[]) => any, R = any>(content: T, options?: NgbModalOptions): NgbModalRef<T, R>;
}

// modal-ref.ts 
...
/**
 * A reference to a newly opened modal.
 */
export declare class NgbModalRef<T extends new (...args: any[]) => any, R = any> {
    private _windowCmptRef;
    private _contentRef;
    private _backdropCmptRef;
    private _beforeDismiss;
    private _resolve;
    private _reject;
    /**
     * The instance of component used as modal's content.
     * Undefined when a TemplateRef is used as modal's content.
     */
    componentInstance: InstanceType<T>;
    /**
     * A promise that is resolved when a modal is closed and rejected when a modal is dismissed.
     */
    result: Promise<R>;
    constructor(_windowCmptRef: ComponentRef<NgbModalWindow>, _contentRef: ContentRef, _backdropCmptRef?: ComponentRef<NgbModalBackdrop>, _beforeDismiss?: Function);
    /**
     * Can be used to close a modal, passing an optional result.
     */
    close(result?: R): void;
    /**
     * Can be used to dismiss a modal, passing an optional reason.
     */
    dismiss(reason?: any): void;
    private _removeModalElements();
}

This can be used like this

const modalRef = this.ngbModal.open(MyComponent);
modalRef.componentInstance // Is typed as an instance of MyComponent

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: Support for Typescript 2.8 was added in version 6.

ng-bootstrap: N/A

NOTE: This should be a major version feature, as is a minimal, but important, breaking change. One of the reasons is that this now would require TS2.8, and the other reason is that this might break with special/complex use cases.

Bootstrap: N/A

[pkozlowski-opensource]

@michaeljota oh cool, this looks better as compared to previous attempts (see #1923).
Would you be up to sending a PR?

[pkozlowski-opensource]

BTW, if you do this it would mean that we would force people to be on TS >= 2.8.x, right? If so, this would be a breaking change...

Even if Angular 6 supports TS 2.8 we need to be in-line when it comes to minimal required TS version...

[michaeljota]

Yes. I just going to update it to point out that this is breaking change.

[maikdiepenbroek]

Just what i ran into, if there's some way i can help, let me know!

[michaeljota]

@pkozlowski-opensource I'm doing this right now, I manage to do it in a way that current behavior won't break. However, maybe for a next major release you could update it to return undefined by default.

[michaeljota]

I was also typing result, but seems work to another PR. 😄

[gentoo90]

Ok, so #2815 was reverted because of #3464, which is sad.
So could this issue be reopened?
CC @maxokorokov