Skip to content

Support template selectors in ListView #527

Closed
@vakrilov

Description

@vakrilov

Add support for item template selector ListView for Angular. Item template selectors will be supported in NativeScript in 2.4.0 release (for reference NativeScript/NativeScript#2820).

Suggested implementation:

  • Use nsTemplateKey directive to give names to your templates
  • Provide a template selector function(itemTemplateSelector property of the ListView component) that returns the name of the template to be used given the data-item.

Here is how the end result will look like:
HTML:

<ListView [items]="myItems" [itemTemplateSelector]="templateSelector">
    <template nsTemplateKey="header" let-item="item">
        <header-component [data]="item"></header-component>
    </template>

    <template nsTemplateKey="item" let-item="item">
        <item-component [data]="item"></item-component>
    </template>
</ListView>

TS(component code)

@Component({ ... })
class MyComponent {
  public myItems: Array<DataItem>;

  public templateSelector(item: DataItem, index: number, items: any) : string {
    return item.isHeader ? "header" : "item";
  }
  // ...
}

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions