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 >

isherwood · Accepted Answer · 2017-07-10 16:46:27Z

170

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>

edited Jul 10, 2017 at 16:46

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Aug 28, 2016 at 16:45

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

raj m Over a year ago

If HTML has for loop then ? I have loop which access the component static variable.. If I use "let person of persons()" it doesnt work. Here persons method return multiple person.. getting "TypeError: self.context.persons is not a function" error

Günter Zöchbauer Over a year ago

@rajm Please create a new question with minimal code that allows to reproduce.

raj m Over a year ago

just posted .. stackoverflow.com/questions/40173118/…

Timothy Zorn Over a year ago

No, you most definitely do not need () on a getter, and shouldn't have it there. get staticUrlArray() {} is not public staticUrlArray() {} One is accessed directly like staticUrlArray, the other as a method like staticUrlArray().

Sudhakar Over a year ago

See the below link also for reference.: github.com/angular/angular/issues/6429

mithus7 · Accepted Answer · 2018-04-27 10:05:28Z

55

To avoid Angular calling get staticUrlArray at each cycle, you can save a class reference in the public scope of the component:

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

And then you can use it directly:

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

answered Apr 27, 2018 at 10:05

mithus7

5855 silver badges10 bronze badges

2 Comments

Dean Over a year ago

For a simple variable I was using for the state of a checkbox, this method avoided dozens of calls to the get function. If used within a loop (e.g. rows of a table) that could really be detrimental. I'd say this is the better answer and the syntax is a bit simpler.

Sir Papilonius Over a year ago

This is a very interesting solution. Declaring a reference to a class within the class itself seems kind of odd. But it does work in Angular.

mmey · Accepted Answer · 2020-07-23 06:55:44Z

7

You can also just declare a field of the class type, as such:

export class UrlComponent {
  static urlArray;

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

You can then reference static variables using this prefix:

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

This also works / is necessary to reference stuff like Enums or objects like console directly in your template.

edited Jul 23, 2020 at 6:55

answered Mar 9, 2020 at 14:18

mmey

1,68517 silver badges24 bronze badges

2 Comments

Bogdan D Over a year ago

seems very much like mithus7's answer

mmey Over a year ago

@BogdanD, indeed, with the small difference that I use "UrlComponent = UrlComponent" as I find this to be more expressive than using a generic "classReference" that doesn't show which class we're talking about. Also, I answered in March while mithus7 answered in April... Looking at it, I noticed that I had a typo in the template, fixed that...

Rajini Nirmal · Accepted Answer · 2021-04-10 13:16:42Z

this worked for me but the error msg for validators stopped working

this is my code.

<form [formGroup]="staticformGroup" class="form">
    <div class="box">
        <input type="text" id="uname" class="field" formControlName="name">
         <span class="PlaceHolder" id="namePlaceHolder">Name</span>
         <small *ngIf="name.invalid && name.touched" class="text-danger">Name is Required</small> 
    </div>
    <div class="box">
         <input type="mailOrNum" id="mailOrNum" class="field" formControlName="email">
         <span class="PlaceHolder" id="mailPlaceHolder">Email</span>
         <small *ngIf="email.invalid && email.touched" class="text-danger">invalid value</small>
    </div>
</form>

ts file:

static signup = new FormGroup({
    'name': new FormControl("", Validators.required),
    'email': new FormControl("", [Validators.required, Validators.email])
});

get staticformGroup():FormGroup{
    return SignUpFormComponent.signup;
}

Felix A. · Accepted Answer · 2020-09-21 09:23:36Z

0

Interestingly, consuming a class-attribute prefixed by "readonly" in the template DOES work. Therefore, if your static variable turns out to actually be a constant, go ahead and use

export class UrlComponent {
    readonly urlArray;
}

answered Sep 21, 2020 at 9:23

Felix A.

611 silver badge4 bronze badges

Comments

Michal.S · Accepted Answer · 2022-03-10 16:12:48Z

0

Solution without coding in constructor:

export class UrlComponent {

  static readonly urlArray = 'Inside Class';

  readonly UrlArray = UrlComponent.urlArray;

  constructor() {  }
}

you can use that static field in other components or classes:

import {UrlComponent} from 'some-path';
export class UrlComponent2 {
  readonly UrlArray = UrlComponent.urlArray;
}

using in template (note capital 'U' in UrlArray):

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

edited Mar 10, 2022 at 16:12

answered Oct 23, 2020 at 12:36

Michal.S

5317 silver badges14 bronze badges

1 Comment

Mike de Klerk Over a year ago

'static' modifier must precede 'readonly' modifier.ts(1029)

Collectives™ on Stack Overflow

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

6 Answers 6

5 Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related