Typed NgbModalRef

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

[gentoo90]

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

[michaeljota]

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