title: ANGULAR 2/4 : call function for each row in NgFor
body: <p>i'm learning AngularJS, and i need some help.</p>
  
  <p>I have a template like this </p>
  
  <pre><code>    &lt;div *ngFor="let beat of data" (invoke)="myFunction(beat.id)" class="item"&gt;
        &lt;div class="item-column-1 inline"&gt;
          &lt;div class="item-column-1-container"&gt;
            &lt;img class="item-img1" src="/CMP.jpg"&gt;
            &lt;p&gt;{{beat.uploader}}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item-column-2 inline"&gt;
          &lt;span class="item-title"&gt;{{beat.title}}&lt;/span&gt;
          &lt;p class="item-score"&gt;245 &lt;/p&gt;
          &lt;span&gt;#TRAPCHILL&lt;/span&gt;
          &lt;p&gt;#TYGA #DRAKE #YOUNG THUG #MIGOS&lt;/p&gt;
          &lt;P&gt;Posted: 2 days ago&lt;/P&gt;
            &lt;!-- &lt;input (click)="rate(beat.id,1)" alt="beat.id" type="radio" id="star1" name="rating" value="1" /&gt;&lt;label class = "full" for="star1" title="{{beat.id}}"&gt;1&lt;/label&gt;
            &lt;input (click)="rate(beat.id,2)" alt="beat.id" type="radio" id="star2" name="rating" value="2" /&gt;&lt;label class = "full" for="star2" title="{{beat.id}}"&gt;2&lt;/label&gt;
            &lt;input (click)="rate(beat.id,3)" alt="beat.id" type="radio" id="star3" name="rating" value="3" /&gt;&lt;label class = "full" for="star3" title="{{beat.id}}"&gt;3&lt;/label&gt; --&gt;
            &lt;div  (click)="rate(beat.id,1)" class="flamme"&gt;&lt;/div&gt;
            &lt;div  (click)="rate(beat.id,2)" class="flamme"&gt;&lt;/div&gt;
            &lt;div  (click)="rate(beat.id,3)" class="flamme"&gt;&lt;/div&gt;
  
          &lt;span&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;button (click)="play(beat.path)" type="button" name="button"&gt;play&lt;/button&gt;
        &lt;button (click)="sendMsg()"&gt;Send&lt;/button&gt;
  
  
        &lt;div class="item-column-3 inline"&gt;
            &lt;img class="album-cover" src="{{beat.path_img}}" alt=""&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Now, for each data in my ngFor, i want to call a function ( in
    occurence myFunction(beat.id)), this function will return a number.</p>
    
    <p>i wanna  retrieve the number of the return function, for display it in
    each data of my ngFor...</p>
    
    <p>I've tried to create a directive "invoke", with an output event, and
    then in my ngAfterContentInit(), i emitted my output, but nothing
    happened, it's not trigged when my data is loaded.</p>
  </blockquote>
  
  <pre><code>@Directive({ selector: '[invoke]'})
  
  export class MainComponent implements OnInit {
  retrievedObject : any;
  src : string;
  data : any;
  current:any;
  rating : any;
  countRate : any;
  subscription: Subscription;
  
  duration:any;
  @Output() invoke:EventEmitter&lt;boolean&gt; = new EventEmitter();
  ---
  ngAfterContentInit() {
    this.invoke.emit(null);
  }
  
  myFunction(beat_id){
  
  alert('trigged');
  }
  </code></pre>
  
  <p>So if anybody have a solution.. thank's !</p>