CODEWITHSUNDEEP
angularjstypescriptangular-ui-bootstrap
AS490
AS490

Reputation: 303

unable to run uibmodal in typescript

i am trying to show a modal using $uibModal using typescript and angular.

    export class PDPController{

    static $inject = ['pdpService', '$sce', 'angularLoad', '$uibModalInstance'];
    constructor(
        pdpService: PDPService, 
        $sce : ng.ISCEService, 
        angularLoad,
        //initiating in constructor
        private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance
    ) {
        this.pdpService=pdpService;
        //Need to add promise
        pdpService.getContentdata(APP_CONSTANT.API_URL_LEARN_MORE)
            .then((authorContentData) => {
            this.contentData= authorContentData;
            pdpService.getPDPdata(APP_CONSTANT.API_URL_LEARN_MORE)
            .then((pdpData) => {
            console.log(pdpData);
            this.setProductDetails(pdpData);
        });
        });

    }
    //method to invoke the modal
    private showPromo(): void{

        console.log("Promo");
          var modalInstance = this.$uibModal.open({
              animation: "true",
              templateUrl: 'promoModalContent.html',
              appendTo: 'body'
            });
    }
}

//module:
let module: ng.IModule = angular.module(pdpModule, ['ui.bootstrap']);

i am facing this error when i run the Gulp Build:

Unknown provider: $uibModalInstanceProvider <- $uibModalInstance
Module 'angular.ui' has no exported member 'bootstrap'.

$uibModal is not recognized when i run the code: Error: Property '$uibModal' does not exist on type 'PDPController'.

I am completely new to Typescript and unable to figure out the way out here. Please guide.

Upvotes: 1

Views: 1799

Answers (2)

AS490
AS490

Reputation: 303

I could solve this issue...but dont really know how this worked! edits i made:

export class PDPController {
    public $uibModal: ng.ui.bootstrap.IModalService;
    public modal: any;

    //injected $uibModal
    static $inject = ['pdpService', '$sce', 'angularLoad', '$uibModal'];
    //initiated $uibModal
    constructor(
        pdpService: PDPService,
        $sce: ng.ISCEService,
        angularLoad,
        $uibModal: ng.ui.bootstrap.IModalService
    ) {
        // i had to assign the value of $uibModal to a new variable, otherwise
        //$uibModal is undefined when accessed in the function showPromo().
        this.modal = $uibModal;
    }

    private showPromo(): void {

        let modalInstance = this.modal.open({
            animation: "true",
            templateUrl: 'promoModalContent.html'
        });
    }
}

It will be great if somebody can explain why we needed a new variable!

Upvotes: 2

Mistalis
Mistalis

Reputation: 18279

You didn't inject $uibModal. Try to add it in your $inject:

static $inject = ['pdpService', '$sce', 'angularLoad', '$uibModalInstance', '$uibModal'];

Upvotes: 0

Related Questions