CODEWITHSUNDEEP
angularjstypescriptangular-material
user1752532
user1752532

Reputation:

Definitely typed with angular material error on $mdSidenav

Just trying to figure out why i am getting an error when toggling the $mdSidenav . This is not a breaking error as the code runs as it should , but i feel that i might be implementing it incorrectly in typescript.

I have added definitely typed and angular material with a simple controller like so

module app.layout {
interface IMenuModel {
    menuItems: app.layout.IMenuItems[];
    toggleSidenav(menuId: string): void; 
}

class MenuCtrl implements IMenuModel {

    menuItems: app.layout.IMenuItems[];

    constructor(private $mdSidenav: ng.material.ISidenavObject) {
        var vm = this;
    }

    toggleSidenav(menuId: string): void {
        this.$mdSidenav(menuId).toggle();
        console.log(menuId);
    }
  }

  angular.module("app").controller("menuCtrl", MenuCtrl);
}

The heart of the code is compiled down to 

     MenuCtrl.prototype.toggleSidenav = function (menuId) {
          this.$mdSidenav(menuId).toggle();
          console.log(menuId);
     };

And the html is 

<md-button ng-click="vm.toggleSidenav('left')" hide-gt-sm class="md-icon-button"> 
  menu  
</md-button>

So this works in the browser , the menu does toggle. However there is an error in the IDE stating that

enter image description here

I feel like i am not implementing this the "typescript" way if you will. the definitely typed ng.material.ISidenavObject looks like this

 interface ISidenavObject {
    toggle(): angular.IPromise<void>;
    open(): angular.IPromise<void>;
    close(): angular.IPromise<void>;
    isOpen(): boolean;
    isLockedOpen(): boolean;
}

Upvotes: 1

Views: 638

Answers (1)

MartyIX
MartyIX

Reputation: 28666

Just change 

constructor(private $mdSidenav: ng.material.ISidenavObject) {

to

constructor(private $mdSidenav: ng.material.ISidenavService) {

You can see corresponding definition.

Upvotes: 3

Related Questions