Angular Template Scope Variable

Question

Is there a feature in Angular to declare a variable like in ngFor?

I want to reduce the calling and computing of same values. I could use the getValue() method also below for getFormatString. But I want to optimize the performance.

I expected something like:

<ion-item [color]="value < 0 ? 'danger' : 'success'" *ngInit="let value = getValue()">
  <h3>Value</h3>
  <p item-end>{{ getFormatString(value) }}</p>
</ion-item>

Actually I have to set the same method to get the same value every time. My idea is about: Fetch the value once, and share it for the child elements. Like ngFor, the variable is available for all other elements in the scope.

Additional: Without create new directive. Maybe wrap the value in an array to use ngFor? But this is ugly. ... I'm sure it is possible. I did this in the past. But I don't know how anymore.

Dag · Accepted Answer · 2019-01-27 05:14:06Z

1

One (a bit dirty) solution is to wrap it in an array and use ngFor like:

<ion-item [color]="value < 0 ? 'danger' : 'success'" *ngFor="let value of [getValue()]">
  <h3>Value</h3>
  <p item-end>{{ getFormatString(value) }}</p>
</ion-item>

answered Jan 27, 2019 at 5:14

Dag

1811 gold badge2 silver badges6 bronze badges

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

Comments

Abhishek · Accepted Answer · 2019-01-27 05:54:28Z

0

*ngFor="let value of values;"

{{value | formatString}}

Transform value using custom filter.

edited Jan 27, 2019 at 5:54

answered Jan 27, 2019 at 5:30

Abhishek

3801 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular Template Scope Variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related