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

Question

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 1

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>