ngx-scroll-selector
v1.0.8
Published
The Angular component allows you to select items from a scrolling list. This would be mainly used when you want to select an source and destination, for example transfering from one account to another.
Downloads
11
Maintainers
Readme
NgxScrollSelector
The Angular component allows you to select items from a scrolling list. This would be mainly used when you want to select an source and destination, for example transfering from one account to another.
The ngx-scroll-selector-column
can have a left
and right
attribute to mark its position.
You can preselect a ngx-scroll-selector-item
by providing [select]='number'
(start counting from 0).
To capture the selected item, you can setup a handler to listen to (selected)
. visorColor
allows you to adjust the bg of the middle row (selected row).
The id
is a mandatory property in the ngx-scroll-selector-item
, otherwise we can't provide the id of the selected row.
Transfer between accounts example
Example usage with 2 columns
<div class="container">
<ngx-scroll-selector>
<!--
Set 'left' to make it the left column. [select] is optional to preselect a list item (start from 0).
(selected) allows you to capture the selected item. `visorColor` allows you to adjust the bg of the middle row (selected row).
-->
<ngx-scroll-selector-column left [select]="1" (selected)="handleSelected($event)" visorColor="#f6f6f8">
<ngx-scroll-selector-column-title>From</ngx-scroll-selector-column-title>
<ngx-scroll-selector-item *ngFor="let account of currentAccounts" [id]="account.id">
<div fxLayout="column" fxLayoutAlign="center center">
<div class="title">{{ account.name }}</div>
<div class="title">{{ account.balance | currency }}</div>
<div class="sub-title" *ngIf="account.dateAvailable">Date available: {{ account.dateAvailable | date:
'shortDate' }}</div>
</div>
</ngx-scroll-selector-item>
</ngx-scroll-selector-column>
<!-- Replace content with mat-icon if you want -->
<ngx-scroll-selector-icon>=></ngx-scroll-selector-icon>
<!--
Set 'right' to make it the right column. [select] is optional to preselect a list item (start from 0).
(selected) allows you to capture the selected item. `visorColor` allows you to adjust the bg of the middle row (selected row).
-->
<ngx-scroll-selector-column right [select]="0" (selected)="handleSelected($event)" visorColor="#f6f6f8">
<ngx-scroll-selector-column-title>To</ngx-scroll-selector-column-title>
<ngx-scroll-selector-item *ngFor="let account of availableAccounts" [id]="account.id">
<div fxLayout="column" fxLayoutAlign="center center">
<div class="title">{{ account.name }}</div>
<div class="title" *ngIf="account.rate">{{ account.rate }}</div>
</div>
</ngx-scroll-selector-item>
</ngx-scroll-selector-column>
</ngx-scroll-selector>
</div>