title: Determine If component is visible in the screen
body: <p>I use Nativescript + Angular and this is my code:</p>
  
  <pre><code>&lt;ScrollView class="body" id="scroll" #scroll (scroll)="scrollEvent($event);"&gt;
      &lt;StackLayout #stackScroll&gt;
  
          &lt;ng-template ngFor let-card [ngForOf]="allList"&gt;
              &lt;StackLayout [card]="card"&gt;
  
                  &lt;my-custom-component [aCard]="card"&gt;&lt;/my-custom-component&gt;
  
              &lt;/StackLayout&gt;
          &lt;/ng-template&gt;
  
      &lt;/StackLayout&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p>I have used this snippet of code and it works great:</p>
  
  <p><a href="https://discourse.nativescript.org/t/how-to-detect-if-component-is-in-screen-view-is-visible/1148/4" rel="nofollow noreferrer">https://discourse.nativescript.org/t/how-to-detect-if-component-is-in-screen-view-is-visible/1148/4</a></p>
  
  <p>I can change the background colour of the "StackLayout" inside the "ng-template".</p>
  
  <p>But I can't access to my custom component variables to modify his behaviour.</p>
  
  <p>For example, if "my-custom-component" is shown, I want to change the property "isShown" in the "card" object passed in the "aCard" attribute.</p>
  
  <p>Thanks to all :)</p>
  
  <p>EDIT1:
  "isShown" is a custom variable that I have used for this test. My idea is to calculate in the afterScroll function what is the cards visible and pass to aCard the parameter to change his behaviour.</p>