Using angular-ui-bootstrap for popup

Question

I'm very much naive in angular and typescript. I'm trying to create a popup on clicking a image. I found a SO link which answers this question using IMODALSERVICE.

How to use angular-ui-bootstrap (modals) in typescript?

However for some reason ng.ui.bootstrap.IModalService type is not recognized in project. Am I doing anything wrong or the SO post has some mistakes. I did add all the angular dependencies in my project.

Answer 1

For your programming environment (IDE like Visual Studio) to be able to recognize types you need to add typescript definitions.

The best way to get the angular-bootstrap-ui is using the TSD tool

Then with the command line at your project you could run the command: tsd install angular-ui-bootstrap --resolve --save

and essentially that would "install" the file angular-ui-bootstrap.d.ts in your typings folder. If your development environment does not detect it simply add /// <reference path="../../../typings/angular-ui-bootstrap/angular-ui-bootstrap.d.ts" /> at the top of your typescript file. Notice that the path must match depending on your folder structures (that's only an example).

After that I personally like to wrap the angular-ui-bootstrap modal in a service, so I'd create a template confirmation-modal.html as follows:

<div>
    <div class="modal-header">
        <h3 class="modal-title">{{ modal.title }}</h3>
    </div>
    <div class="modal-body">
        {{ modal.bodyText }}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="modal.ok()">OK</button>
        <button class="btn btn-default" type="button" ng-click="modal.cancel()">Cancel</button>
    </div>
</div>

That's the view for the modal. It's a basic confirmation dialog with buttons OK and Cancel, a title and a body text. You can get the idea though.

Then I'd create a service modal.service.ts with a function to show a confirmation dialog that accepts a title, a bodyText and a callback function for the OK button and optionally for the CANCEL button. For example:

/// <reference path="../../../typings/angular-ui-bootstrap/angular-ui-bootstrap.d.ts" />
module app.services {
    "use strict";

    interface IModalParams {
        title: string;
        bodyText: string;
        onOk(): void;
        onCancel(): void;
    }

    interface IModalConfirmationInstance {
        title: string;
        bodyText: string;
        ok(): void;
        cancel(): void;
    }

    export interface IModalService {
        showConfirmDialog(title: string, bodyText: string, onOk: () => void, onCancel?: () => void): void;
    }

    class ModalInstanceController implements IModalConfirmationInstance {

        public static $inject = [
            "$uibModalInstance",
            "modalParams"
        ];

        constructor(
            private $uibModalInstance: angular.ui.bootstrap.IModalServiceInstance,
            private modalParams: IModalParams) {
        }

        public title: string = this.modalParams.title;

        public bodyText: string = this.modalParams.bodyText;

        public ok(): void {
            this.modalParams.onOk();
            this.$uibModalInstance.close();
        }

        public cancel(): void {
            if (this.modalParams.onCancel) {
                this.modalParams.onCancel();
            }
            this.$uibModalInstance.dismiss();
        }
    }

    class ModalService implements IModalService {
        constructor(
            private $uibModal: angular.ui.bootstrap.IModalService) {
        }

        public showConfirmDialog(title: string, bodyText: string, onOk: () => void, onCancel?: () => void): void {
            console.log("show modal");

            let modalParams: IModalParams = {
                title: title,
                bodyText: bodyText,
                onOk: onOk,
                onCancel: onCancel 
            };

            let modalInstance = this.$uibModal.open({
                animation: true,
                templateUrl: "/app/confirmation-modal.html",
                controller: ModalInstanceController,
                controllerAs: "modal",
                size: null, // default size
                resolve: {
                    modalParams: () => modalParams
                }
            });
        }
    }

    factory.$inject = [
        "$uibModal"
    ];

    function factory(
        $uibModal: angular.ui.bootstrap.IModalService): IModalService {
        return new ModalService($uibModal);
    }

    angular
        .module("app.services")
        .factory("app.services.ModalService", factory);
}

Notice that in addition to the service, in the same file I have created a controller to handle the modal instance and that the resolve property is passing an object to that controller with all the necessary parameters wrapped in it. Also notice that I don't like using $scope and I prefer using the controller as approach. That's why I have the controller property as controllerAs defined as "modal" so that in the template modal view I can refer to the controller with the word modal (or whatever you choose).

Now all my functionality is wrapped in a service, so I can show my confirmation dialog modal from anywhere where my service has been injected. For example, let's say I have a view attached to a controller somewhere..

<div ng-controller="app.foo.MyController as myCtrl">
  <!-- some things and below a button to delete something with confirmation (or whatever) -->
  <button ng-click="myCtrl.delete()">
     <span class="fa fa-trash-o" aria-hidden="true"></span>
  </button>
</div>

Then in that MyController I could have for example the function that gets triggered when clicking on the delete button:

module app.foo {
    "use strict";

    interface IMyControllerScope {
        delete(): void;
    }

    class MyController  implements IMyControllerScope {
        public static $inject = ["app.services.ModalService"];

        constructor(private modalService: app.services.IModalService) {
        }

        public delete(): void {
            this.modalService.showConfirmDialog("Delete Things", "Are you sure?",
                () => {
                    console.log("The button OK has been click. Do things");
                    // some actions to execute when the button OK has been pressed
                });
        }
    }

    angular
        .module("app.foo")
        .controller("app.foo.MyController ", MyController );
}

Notice how I inject the service that wraps the modal functionality and the only thing I have to do is provide a title and body for the modal and the action to execute when OK (and optionally Cancel) is clicked.

Answer 2

Make sure you've installed angular-ui-bootstrap.d.ts https://www.nuget.org/packages/angular-ui-bootstrap.TypeScript.DefinitelyTyped/

if you're using visual studio usually package get install in Scripts/typings/