Angular2 template - use variable not on this

Question

Is it possible to use a variable in an Angular 2 template that is not on the this context?

For example:

<div>{{ fooBar }}</div>

fooBar needs to be defined in the class used by this component somewhere, like:

export class MyComponent {
  public fooBar: boolean = true;
}

But what if you just want to use a value that's not on the class? For example, maybe you want to import a list of string constants and display them selectively in the template:

import { MyService } from './my.service'; 
import { StringConstants } from '../string.constants';

@Component({
  selector: 'my-component',
  template: `
    <div *ngIf="isPrimary">{{ StringConstants.PRIMARY }}</div>
    <div *ngIf="isSecondary">{{ StringConstants.SECONDARY }}</div>
  `
})

export class MyComponent {
  public isPrimary: boolean;
  public isSecondary: boolean;

  constructor (private myService: MyService) {
    this.isPrimary = myService.getPrimaryContext();
    this.isSecondary = myService.getSecondaryContext();
  }
};

Just assign that list to a class variable?

Dimanoid
– Dimanoid

2016-12-06 21:02:07 +00:00
Commented Dec 6, 2016 at 21:02 — Dimanoid
– Dimanoid, Commented Dec 6, 2016 at 21:02

yurzui · Accepted Answer · 2016-12-06 21:02:15Z

2

I see two ways to achieve it:

1) Define variable in component with the same name as your constant

export class MyComponent {
  StringConstants = StringConstants;
  ...

2) Use es6 string interpolation

template:`
  <div *ngIf="isPrimary">${StringConstants.PRIMARY}</div>
  <div *ngIf="isSecondary">${StringConstants.SECONDARY}</div>
`
export class MyComponent {

answered Dec 6, 2016 at 21:02

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

1 Comment

A. Duff Over a year ago

To be clear: looks like option 2 will only work if the template is inlined, not external.

Collectives™ on Stack Overflow

Angular2 template - use variable not on this

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related