The Angular *ngFor is a handy way to display iterable data from a Kinvey collection on a view. The following example uses the Custom Xml Kinvey Studio component to display data from the sample vehicles collection.


Take the following steps to display the data:


  1. Create a Blank mobile view.
  2. Add vehicles as a Data Service.
  3. Drag and drop a Stack Layout to the view.
  4. Drag and drop the Custom Xml component inside the stack layout.
  5. In the Inspector for the Custom Xml component, click Edit XML and replace the contents with the following:



    <Label *ngFor="let item of vehiclesService.dataChanges | async" [text]="item.make"></Label>