Bind static variable (out of scope) to html in Angular / typescript

Question

I created a little test typescript/angularjs website.

I have this module with a static variable which I want to bind to the html-document so that I can see the current logged-in user.

module mytest.constants {

    export class CurrentSession {

        public static CURRENT_USER: string = "Tobi";

    }
}

the problem is: the current scope is a controller which is separated from my CurrentSession-class.

I would like to do something like

<div class="label" style="color:green">
  Logged in as: {{mytest.constants.CurrentSession.CURRENT_USER}}
</div>

Another way I could do is to add a class-member to the controller and set it in constructor like:

this.CurrentUSer = mytest.constants.CurrentSession.CURRENT_USER

but I would prefer to bind the static-variable directly to the html-file.

is this possible?

dfsq · Accepted Answer · 2015-07-18 10:08:49Z

6

You can't bind static properties like this, Angular just doesn't check those in its digest cycle. You can however create a scope/this reference to the class itself. Something like this:

module mytest.constants {

    export class CurrentSession {

        public static CURRENT_USER: string = "Tobi";

        CurrentSession = CurrentSession;

    }
}

So basically it will create own property like this.CurrentSession = CurrentSession.

Then in template (assuming you are using controllerAs syntax with session refer to controller instance) you would be able to bind CURRENT_USER as

<div>{{session.CurrentSession.CURRENT_USER}}</div>

answered Jul 18, 2015 at 10:08

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mosh Feu · Accepted Answer · 2017-04-24 14:50:44Z

2

thank you dfsq for your quick answer.

I finally found another solution.

I first set a variable called "CurrentSession" in my app.ts and set the value to a new Instance of my Object

angular.module("app", [])
    .constant("CurrentSession", new mytest.constants.CurrentSession())

then I can just inject this Constant in my controller like this:

export class MainCtrl {

    public static $inject = ["$state", "$http", "CurrentSession"];

    constructor($state, $http, private CurrentSession) {
      ...
    }

the good thing here is, that I can use the "private CurrentSession" which will automatically set the a member-variable "CurrentSession".

The html looks like this:

<button ng-click="main.logOut()">Log out {{main.CurrentSession.CURRENT_USER.Name}}</button>

edited Apr 24, 2017 at 14:50

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

answered Jul 18, 2015 at 17:34

Tobias Koller

2,2165 gold badges30 silver badges48 bronze badges

Collectives™ on Stack Overflow

Bind static variable (out of scope) to html in Angular / typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related