UI for NativeScript
Demos About

Progress NativeScript UI and Angular: Overview

If you are comfortable with using Angular for your NativeScript development purposes we are happy to let you know that Progress NativeScript UI exposes its components through Angular directives as well. Here are the components NativeScript UI supports with Angular:

ListView for Angular: overview

ListView for Angular exposes all of the familiar features already available through the NativeScript UI APIs:

  • Pull to refresh
  • Load on demand
  • Swipe to execute
  • Header and footer
  • Item reorder
  • Item selection

For more information on setting up and using a particular feature, take a look at the dedicated article in RadListView's documentation section. The articles are extended with Angular snippets and explanations where needed.

SideDrawer for Angular: overview

SideDrawer for Angular brings the familiar experience to your Angular based NativeScript application of separating the main menu from home page content via animated views. The following features are supported:

  • Transitions
  • Drawer location
  • Drawer state events

For more information on setting up and using a particular feature, take a look at the dedicated article in RadSideDrawer's documentation section. The articles are extended with Angular snippets and explanations where needed.

Calendar for Angular: overview

Calendar for Angular exposes all of the familiar features already available through the NativeScript UI APIs:

  • Inline events
  • Different view modes
  • Cells customization
  • Selection

For more information on setting up and using a particular feature, take a look at the dedicated article in RadCalendar's documentation section. The articles are extended with Angular snippets and explanations where needed.

Chart for Angular: overview

Chart for Angular exposes all of the familiar features already available through the NativeScript UI APIs:

  • Series - LineSeries, SplineSeries, AreaSeries, BarSeries, RangeBarSeries, BubbleSeries, ScatterBubbleSeries, ScatterSeries, OhlcSeries, CandlestickSeries, PieSeries, DonutSeries
  • Axes - LinearAxis, CategoricalAxis, DateTimeCategoricalAxis
  • RadCartesianChartGrid
  • RadLegendView

For more information on setting up and using a particular feature, take a look at the dedicated article in RadChart's documentation section. The articles are extended with Angular snippets and explanations where needed.

DataForm for Angular: overview

DataForm for Angular exposes all of the familiar features already available through the NativeScript UI APIs:

  • Properties - TKEntityProperty
  • Groups - TKPropertyGroup
  • Editor - TKPropertyEditor
  • Validators - TKNonEmptyValidator ...

For more information on setting up and using a particular feature, take a look at the dedicated article in RadDataForm's documentation section. The articles are extended with Angular snippets and explanations where needed.

AutoComplete for Angular: overview

AutoComplete for Angular exposes all of the familiar features already available through the NativeScript UI APIs:

  • Suggest modes - Suggest, Append and SuggestAppend
  • Display modes - Plain and Tokens
  • Token Layout modes - Wrap and Horizontal
  • Completion modes - StartsWith and Contains

For more information on setting up and using a particular feature, take a look at the dedicated article in RadAutoComplete's documentation section. The articles are extended with Angular snippets and explanations where needed.

Gauge for Angular: overview

Gauge for Angular exposes all of the familiar features already available through the NativeScript UI APIs:

  • Scales
  • Indicators

For more information on setting up and using a particular feature, take a look at the dedicated article in RadGauge's documentation section. The articles are extended with Angular snippets and explanations where needed.

Installation

The Angular directives for NativeScript UI are part of the plugins that provide each component and are available on npmjs.org. For each plugin you can find the directives in a angular folder within the plugin's main folder. From that point, you have a couple of approaches to use components which are described in the Getting started article.