Make platform-specific customisations on every item in ListView


#1

Hi! I have a ListView with items that appears after http request:

<ListView *ngIf="!error" [items]="visibleTrips" [class.visible]="listLoaded">        
      <ng-template let-item="item">
          <StackLayout class="card-wrapper">
          ...
          </StackLayout>
      </ng-template>
</ListView>

What I actually need is to add shadow for each item. But shadows have to be set for every platform in different way. I need to get native StackLayout element for each item in the list once it appears/ How can I get all list items native components?


#2

You can create your own component which extends StackLayout, where you will probably write your code for adding shadow. Use that newly created component in ListView template.

export class MyComponent extends StackLayout {

     onLoaded(){
       super.onLoaded();
       // Write your code to add shadow
    }
}

Note: For Angular you have to register your component so it can be accessed via templates.