title: How can I make a StackLayout with ngFor loop into scrollable list?
body: <pre><code> &lt;StackLayout width="100%" *ngFor="let item of (videos$ | async)"&gt;
       &lt;CardView class="studentCard" margin="2" elevation="10" radius="1"&gt;
          &lt;GridLayout rows="auto, auto, auto" columns="auto, auto, *"&gt;
              &lt;Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"&gt;&lt;/Image&gt;
              &lt;Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" &gt;&lt;/Label&gt;
              &lt;Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" &gt;&gt;&lt;/Label&gt;
          &lt;/GridLayout&gt;
       &lt;/CardView&gt;
   &lt;/StackLayout&gt;
  </code></pre>
  
  <p>I tried to wrap it in <code>ScrollView</code>, didn't work.</p>
  
  <p>I couldn't make <code>(items$ | async)</code> work with <code>ListView</code> either, seems <code>ngFor</code> can't work with <code>ListView</code>, we need <code>ng-template</code> for <code>ListView</code>.</p>
  
  <p>I tried the following but only the first item is rendering</p>
  
  <pre><code>&lt;ScrollView&gt;
    &lt;ListView [items]="videos$ | async" class="list-group"&gt;
      &lt;ng-template let-item="item"&gt;
         &lt;GridLayout  class="list-group-item"&gt;
           &lt;Image [src]="item.snippet.thumbnails.high.url"&gt;&lt;/Image&gt;
           &lt;Label [text]="item.snippet.channelTitle" &gt;&lt;/Label&gt;
           &lt;Label [text]="item.snippet.title"&gt;&gt;&lt;/Label&gt;
         &lt;/GridLayout&gt;
      &lt;/ng-template&gt;
    &lt;/ListView&gt;
  &lt;/ScrollView&gt;
  </code></pre>