by themounthead | v1.0.0
NativeScript + Angular Accordion UI Control
npm i --save nativescript-ngx-accordion


A Nativescript Angular UI Control for Expand/Collapse Toggle panels. It is an extension of the (IListView)[] control.


npm install nativescript-ngx-accordion --save

Import the module into your app-module

import { AccordionViewModule } from 'nativescript-ngx-accordion';

Getting Started

Similar to the ListView, you need to define the ListItem template, as shown below.

<ng-template #accordion let-item="item" let-index="index">
<!-- Place the header here -->
<!-- Place the main content here -->
<!-- Place the footer here -->
<!-- Spacer gap for the items -->
<!-- Skeleton for intermediate loading -->
  • The AccordionContent is where you would insert your item content, possibly an Angular Component
  • The AccordionDivider is simply a spacer tag for the items, like a horizontal line
  • The AccordionPlaceholder is the skeleton for your item before the content gets instantiated


The AccordionView accepts limit as an argument which is default to 30.

It emits a value with the eofItems emitter when the list has reaches the end, for async loading more data to the list.


The AccordionService can be used to add more items to the list with the method addItems()


Provided in the demo app