Santosh Hegde Santosh Hegde - 3 months ago 150
TypeScript Question

How to bind static variable of component in HTML in angular 2?

I want to use a static variable of a component in HTML page.
How to bind static variable of component with a HTML element in angular 2?

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';
@Component({
moduleId: module.id,
selector: 'url',
templateUrl: 'url.component.html',
styleUrls: ['url.component.css']
})
export class UrlComponent {

static urlArray;
constructor() {
UrlComponent.urlArray=" Inside Contructor"
}
}


<div>
url works!
{{urlArray}}
</div >

Answer

The scope of binding expressions in a components template is the components class instance.

You can't refer to globals or statics directly.

As a workaround you can add a getter to your components class

export class UrlComponent {

  static urlArray;
  constructor() {
  UrlComponent.urlArray=" Inside Contructor"
  }

  get staticUrlArray() {
    return UrlComponent.urlArray
  }

}

and use it like

<div>
  url works!
   {{staticUrlArray}}
</div >
Comments