CODEWITHSUNDEEP
htmlangulartypescript
AverageSoul
AverageSoul

Reputation: 105

Variable in html ,angular

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

Upvotes: 0

Views: 8619

Answers (5)

AverageSoul
AverageSoul

Reputation: 105

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

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

Upvotes: 1

Vaibhav Mahajan
Vaibhav Mahajan

Reputation: 222

You can pass variables to newvar function like this.

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

Upvotes: 0

Eliseo
Eliseo

Reputation: 57919

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

Upvotes: 0

code đờ
code đờ

Reputation: 615

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>

Upvotes: 0

Tamil.S
Tamil.S

Reputation: 463

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>

Upvotes: 1

Related Questions