title: Angular 2: execute a function when the element appears on the screen
body: <p>With Angular 2, how can i execute a function when an element appears on the screen ? With good performance.</p>
  
  <p>The context is the following: I have a loop, and when the element appears on the screen, I would like to execute a function from the controller.</p>
  
  <pre><code>&lt;ion-list&gt;
      &lt;button ion-item *ngFor="#item of items" (click)="itemTapped($event, item)"&gt;
        &lt;ion-icon name="{{item.icon}}" item-left&gt;&lt;/ion-icon&gt;
        {{item.title}}
        &lt;div class="item-note" item-right&gt;
          {{item.note}}
        &lt;/div&gt;
        &lt;img [src]="item.imageSrc"&gt;
      &lt;/button&gt;
    &lt;/ion-list&gt;
  </code></pre>
  
  <p>With Angular 1, I used ng-init and the function "article.getImg()"  and a different context (not to display all the images at once)</p>
  
  <pre><code>&lt;img ng-show="article.hasImage" ng-init="article.imageLookedFor == false ? article.getImg() : null" ng-src="{{article.imageSrc}}" imageonloadheadline /&gt;
  </code></pre>