Angular 2 Function call in *ngFor getting called multiple times
<p>I am calling a function on a directive to render series data for a chart.</p>

<pre><code>import {Directive, Input, OnInit} from '@angular/core';

@Directive({
  selector: '[onCreate]'
})
export class OnCreate implements OnInit{
  @Input() onCreate:Function;
  ngOnInit() {
    console.log('Directive Initialized. The value is: ', this.onCreate);
  }
}
</code></pre>

<p>The getSeries Data function is getting called endlessly. It should only be getting called 15 times. What am I doing wrong?</p>

<p>Dashboard Component.ts</p>

<pre><code>import{ Component , OnInit} from '@angular/core';
import { Router } from '@angular/router';
import {SimpleChartComponent} from "../charts/simpleChart.component";
import {AppleChartComponent} from "../charts/appleChart.component";
import {BarChartComponent} from "../charts/barChart.component";
import {DonutChartComponent} from "../charts/donutChart.component";
import {AlertComponent} from 'ng2-bootstrap/ng2-bootstrap';
import {ModalDemoComponent} from "../modals/modalDemoComponent";
import {NgInitHelperComponent} from "../helpers/nginit.helper.component";
import {ModalDirective} from "ng2-bootstrap/ng2-bootstrap";
import {BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
import {SurveyService} from "../survey/survey.service";


@Component({
  selector: 'dashboard',
  templateUrl: '/app/components/dashboard/dashboard.component.html',
  providers: [BS_VIEW_PROVIDERS],
  directives: [SimpleChartComponent, AppleChartComponent, BarChartComponent, DonutChartComponent, AlertComponent, ModalDemoComponent, NgInitHelperComponent, ModalDirective]
})
export class DashboardComponent implements OnInit {

  public areas:any;
  public seriesData: any[];

  constructor(public router: Router, public surveyService: SurveyService) {

    this.router = router;
    this.surveyService = surveyService;
    this.areas = this.surveyService.questions;
    this.seriesData = [20,40,60,80,100];

  }

  ngOnInit(){

    console.log('Dashboard Component Init!');


  }

  goToDimension(id){

      this.router.navigate(['/dimensions', id]);

  }


  getSeriesData(i){

    console.log('Getting series data', i);
    return [1,2,3,4,5]//this will eventually return data via id etc.


  }
}
</code></pre>

<p>Dashboard Component.html</p>

<pre><code>&lt;h1&gt;Welcome to the Dashboard! &lt;i class="fa fa-question-circle-o" (click)="m.show()"&gt;&lt;/i&gt;&lt;/h1&gt;
&lt;hr/&gt;
&lt;!--&lt;div class="row"&gt;--&gt;
&lt;!--&lt;div class="col-md-12"&gt;&lt;bar-chart selector="chart_dashboard" heading="Dashboard"&gt;&lt;/bar-chart&gt;&lt;/div&gt;--&gt;
&lt;!--&lt;/div&gt;--&gt;
&lt;div class="row"&gt;
  &lt;div *ngFor="let i of areas" class="col-sm-12 col-md-12 col-lg-6"&gt;
    &lt;div class="row" style="border: 1px solid grey; margin: 30px 0 0 0; padding-bottom: 20px;"&gt;

     &lt;div class="col-sm-4 col-md-5"&gt;
       &lt;div [onCreate]="getSeriesData(i.id)"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-8 col-md-7"&gt;
        &lt;h3&gt;This items title the area.&lt;/h3&gt;

        &lt;p&gt;Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. Some paragraph about this item. &lt;/p&gt;

        &lt;div class="text-right"&gt;
          &lt;button class="btn btn-primary" (click)="goToDimension(i.id)"&gt;Learn More!&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;modal-demo #m="child"&gt;&lt;/modal-demo&gt;
</code></pre>

<p>See image, Directive fires 15 times as intended, but the function call is infinite.</p>

<p><a href="https://i.stack.imgur.com/Yha0F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yha0F.png" alt="Directive 15 times. GOOD"></a></p>

<p><a href="https://i.stack.imgur.com/tlB2p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tlB2p.png" alt="Inifinite Loop BAD :("></a></p>