title: How to use ngFor index variable in child component
body: <p>I have a created a list out of an array using ngFor, and I am importing in element's of that list via other components. </p>
  
  <p>In my list component, I am using ngFor to get the index, I would like to use this index within the child components (see code) to create dynamic variables but I can't seem to get it to work.</p>
  
  <pre><code>//main list html template
  &lt;li *ngFor="#task of taskService.tasks; #i = index" class="list-group-item"&gt;
      &lt;task-item [task]="task"&gt;&lt;/task-item&gt;
  &lt;/li&gt;
  
  
  //task item component html template
  &lt;div class="read-only"&gt;
      &lt;label [contentEditable]="taskService.editable[i] == true" ng-model="task.title"&gt;{{task.title}}&lt;/label&gt;
      &lt;p [contentEditable]="taskService.editable[i] == true" ng-model="task.description"&gt;{{task.description}}&lt;/p&gt;
      &lt;task-actions [task]="task"&gt;&lt;/task-actions&gt;
  &lt;/div&gt;
  
  
  //task actions component html template 
  &lt;button type="button" (click)="taskService.deleteTask(task.title)"   class="btn btn-danger btn-xs"&gt;delete&lt;/button&gt;
  &lt;button type="button" (click)="taskService.editTask(i)"     class="btn btn-info btn-xs"&gt;Edit&lt;/button&gt;
  &lt;button type="button" (click)="completeTask()"  class="btn btn-success btn-xs"&gt;complete&lt;/button&gt;
  </code></pre>
  
  <p>Within the 'taskService', I have a method on click called - editTask(i) - I want to be able to pass the index of the array item </p>
  
  <p>my class looks something like this:</p>
  
  <pre><code>export taskService {
  
    editable = [];
  
    editTask(i){
       this.editable[i] == true;
    }
  
  }
  </code></pre>
  
  <p>I hope I have explained that well enough, let me know if you need more info!</p>