Variable in html ,angular

Question

I am working on an app in angular and in an html file i have something like this

<div *ngFor="let var of list">
  <div>
     {{newVar.name}}
   <div>
</div>

My problem is that i dont know how to declare newVar properly in the div because i want newVar to be a result returned from a function in the component that takes the first var as parameter

so i basically want something like

newVar=func(var)

before using the name attribute and i dont know how to do this

I could do func(var).name but i dont only display the name so i dont want to call the function multiple times

You want your function to populate newVar not for newVar to be your function. When you call you function depends on when you want this to get populated — Liam
– Liam, Commented Jul 28, 2021 at 14:37
i want the function to populate newvar before i display it yes — AverageSoul
– AverageSoul, Commented Jul 28, 2021 at 14:38
rather than looping in html, why not loop in TS and generated div for each var dynamically — Sumant Agnihotri
– Sumant Agnihotri, Commented Jul 28, 2021 at 14:40

Tamil.S · Accepted Answer · 2021-07-28 14:51:44Z

1

So your workaround is something like , streaming list in html and passing var to typescript function func(var) storing result in newVar. From there you want to display name value in UI . Is my understanding is correct , my suggestion is

ts

newVar = [];
///
func() {
  list.forEach(element=>{
    newVar.push(element);
  });
}

html

<div *ngFor="let var of newVar">
  <div>
     {{var.name}}
   <div>
</div>

answered Jul 28, 2021 at 14:51

Tamil.S

4924 silver badges15 bronze badges

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

Comments

AverageSoul · Accepted Answer · 2021-07-29 16:06:22Z

1

i have found a solution,basically you can do something like

<div *ngIf="func(var) as newVar">
   {{newVar.name}}
</div>

answered Jul 29, 2021 at 16:06

AverageSoul

1152 silver badges7 bronze badges

1 Comment

sirbradwick Over a year ago

I use a similiar approach. <ng-container *ngIf="{ goofy: !!bill && !!bob } as group">. Then inside the container, I can access the variable like so: group.goofy

code đờ · Accepted Answer · 2021-07-28 15:05:44Z

0

Currently there aren't any direct solution for this. One workaround is to use *ngFor as a hack (and the cost is performance)

<div *ngFor="let _var of list">
  <div *ngFor="let newVar of [func(_var)]">
    {{newVar.name}}
  </div>
</div>

edited Jul 28, 2021 at 15:05

answered Jul 28, 2021 at 14:44

code đờ

6151 gold badge10 silver badges26 bronze badges

4 Comments

AverageSoul Over a year ago

how slower it is since the list basically only has an element?

code đờ Over a year ago

Angular will have to re-render entire that div each time var change (due to its change-detection mechanism), and re-rendering is costly

code đờ Over a year ago

As a side-note, a recommend you rename var into something else, because var is a keyword of javascript/typescript

AverageSoul Over a year ago

it is named something else ,it was just for example

Eliseo · Accepted Answer · 2021-07-28 15:21:47Z

you has severals options:

<div *ngFor="let var of list">
    {{func(var).name}}
</div>

Use an auxiliar array

//in your .ts
auxArray:any[]=[];

this.auxArray=this.list.map(x=>this.func(x))

//and iterate over auxArray
    <div *ngFor="let var of auxArray">
        {{var.name}}
    </div> 

 //or iterate over list and use "index"
    <div *ngFor="let var of list;let i=index">
        {{var}} = {{auxArray[i].name}}
    </div>

If your list is an array of object you can also

//in your .ts
this.list.forEach(x=>{
   data:this.func(x)
}

//and iterate over list but use data.name
    <div *ngFor="let var of list">
        {{var.data.name}}
    </div>

The first option has a poor efficency because Angular execute the function several times -each time check the application, you can see if use a console.log(var) in your function

Wai Ha Lee · Accepted Answer · 2021-07-29 08:02:42Z

0

You can pass variables to newvar function like this.

<div *ngFor="let var of list">  
    <div>      {{newVar(var)}}    <div> 
</div>

edited Jul 29, 2021 at 8:02

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Jul 29, 2021 at 5:56

Vaibhav Mahajan

2321 silver badge5 bronze badges

Collectives™ on Stack Overflow

Variable in html ,angular

5 Answers 5

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related