Way to declare a variable from within a template?

Question

I find myself writing code like this:

<div *ngIf="globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff != null">
    <span [ngStyle]="globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.street1Style" *ngIf="globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.street1.length > 0">{{globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.street1}}<br /></span>
    <span *ngIf="globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.street2.length > 0">{{globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.street2}}<br /></span>
    <span *ngIf="globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.city.length > 0">{{globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.city}},</span>
    <span *ngIf="globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.state.length > 0">{{globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.state}},</span>
    <span *ngIf="globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.zip.length > 0">,{{globals.fieldErrors[item.jsonParent][item.jsonName].locationADiff.zip}}</span>
</div>

Is there a way to simplify that? I'd like to set a single variable, such as "myVar" equal to "globals.fieldErrors[item.jsonparent][item.jsonName]" to reduce verbosity.

what about [this](https://github.com/angular/angular/issues/14985) ? — omurbek, Feb 27 '18 at 03:49

Vivek Doshi · Accepted Answer · 2018-02-28T02:34:34.740

1

You can use it like :

<div *ngIf="{ a: 1, b: 2 }; let variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
</div>

For more detail read : How to declare a variable in a template in Angular2

Answer to your comment is :

Cool, thanks. It works, but means I need a separate with its own *ngIf to test if locationADiff != null. Then another inner that creates the variable. Any idea if there is a way to combine both the test and variable creation into a single *ngIf?

<div *ngIf="checkCondition && { a: 1, b: 2 }; let variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
</div>

WORKING DEMO

edited Feb 28 '18 at 02:34

answered Feb 27 '18 at 03:57

Vivek Doshi

56,649
12
110
122

Cool, thanks. It works, but means I need a separate
with its own *ngIf to test if locationADiff != null. Then another inner
that creates the variable. Any idea if there is a way to combine both the test and variable creation into a single *ngIf?
– Vern Jensen Feb 27 '18 at 21:46

Way to declare a variable from within a template?

1 Answers1