Call a function inside ngFor in angular2

Question

Hello I am using Angular2 and wanted to fetch the server and get some values for each ID I get inside ngFor.

<div *ngFor="let item in items">
  <span> here call a function that do something with 'item' and return something new <span>
</div>

Answer 1

You can make use of custom directive to call the method for each iteration:

import { Directive, Output, EventEmitter, Input, SimpleChange} from '@angular/core';

@Directive({
  selector: '[onCreate]'
})
export class OnCreate {

  @Output() onCreate: EventEmitter<any> = new EventEmitter<any>();
  constructor() {}
  ngOnInit() {      
     this.onCreate.emit('dummy'); 
  } 

}

and then you can use it in your *ngFor to call the method in your component:

<div *ngFor="let item of items">
    <div *ngIf="item" (onCreate)="yourMethod(item)"> 
    </div>
</div>

in Your component you can call this method as:

yourMethod(item){
   console.log(item);
}

Answer 2

Doesn't sound very good , however , the simplest way :

<div *ngFor="let item of items">
  <span data-dummy="{{myFunction()}}" > here call a function that do something with 'item' and return something new <span>
</div>

Proper way :

@Directive({
  selector: '[runDummyFunc]'
})
export class runDummyFunc {

  constructor() {}
  ngOnInit() {      
     this.runDummyFunc()
  } 

}


<div *ngFor="let item in items">
    <span [runDummyFunc]="myFunction" > here call a function that do something with 'item' and return something new <span>
</div>

In your class :

      myFunction = ():void=>{

         console.log('whatever');
      }

Answer 3

How about changing data before it comes to *ngFor in Typescript itself,

this.items.forEach((item,index)=>{
  item=this.func(item,index);
})

func(item,index):string{
    return item+ String(index); //do whatever you wish to do.
}

Answer 4

Better do such function calls on each item in ngOnInit in a subscription, and then they should be displayed with *ngFor after transformation.

and change:

<div *ngFor="let item in items">

to

<div *ngFor="let item of items">

Answer 5

The template is not the place to do that, you want to get your data in the component code. Sounds like you want to use something like flatMap of an observable, which lets you return another observable for each item in the source observable. This could be the returns of an http api call or whatever (fiddle):

var ids = ["a", "d", "c"];
var lookupValues = { "a": 123, "b": 234, "c": 345, "d": 456 };

// given an id
function fakeApiCall(id) {
  // given an id, return an observable with one entry: an object consisting
  // of an 'id' property with that id value and a 'lookup' property with the
  // value from lookupValues for that id
  return Rx.Observable.just({ id: id, lookup: lookupValues[id] });
}

var o1 = Rx.Observable.from(ids); // 'a, d, c

var o2 = o1.flatMap(x => {
  // here we get each value from o1, so we do an api call and return
  // an observable from each that will have the values in that
  // observable combined with all others to be sent to o2
  return fakeApiCall(x);
});

o2.subscribe(x => {
  document.write(JSON.stringify(x) + "<br/>");
});

// result:
// {"id":"a","lookup":123}
// {"id":"d","lookup":456}
// {"id":"c","lookup":345}

Answer 6

you can use trackBy:

@Component({
selector:'heroes',
template: `
<table>
    <thead>
        <th>Name</th>
    </thead>
    <tbody>
        <tr *ngFor="let hero of heroes; trackBy: trackHero" >
            <td>{{hero.name}}</td>
        </tr>
    </tbody>
</table>`})

export class Heroes {
    heroes = HEROES;

    trackHero(index, hero) {
        console.log(hero);
    }
}

Answer 7

Not sure if this is what you're asking, but you can pass in the item to a function along with an event variable like this:

<div *ngFor="let item in items">
  <span (click)="functionCall($event, item)"> <span>
</div>

And then grab that item in your class like this:

functionCall(event, item): void {
  console.log('item clicked:", item)
}

Answer 8

Write an another "ngFor" in between span tag in component.html

 <div *ngFor="let item in items">  
    <span *ngFor="let new of filterItems(item)"> {{new.anyAttribute}} </span>
 </div>

in component.ts if you want to filter item

filterItems(item) {
  let filterArray:any=[];
  return filterArray.filter(x => x.anyAttribute == item.anyAttribute);
}

if you want to return an array in item

filterItems(item){
   return item.Array //Array is an array in item
}

Answer 9

Component({
    selector:'heroes',
    template: `
    <table>
        <thead>
            <th>Name</th>
        </thead>
        <tbody>
            <tr *ngFor="let hero of heroes; trackBy: trackHero" >
                <td>{{hero.name}}</td>
            </tr>
        </tbody>
    </table>
`
})
export class Heroes {

    heroes = HEROES;

    trackHero(index, hero) {
        console.log(hero);
        return hero ? hero.id : undefined;

    }
}