Telerik UI for NativeScript and Angular: Overview

If you are comfortable with using Angular for your NativeScript development purposes we are happy to let you know that Telerik UI for NativeScript exposes its components through Angular directives as well. The first release of the Angular support for NativeScript UI delivers directives for the following components:

ListView for Angular 2.0: overview

ListView for Angular 2.0 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 2.0 snippets and explanations where needed.

SideDrawer for Angular 2.0: overview

SideDrawer for Angular 2.0 brings the familiar experience to your Angular 2.0 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 2.0 snippets and explanations where needed.

Calendar for Angular 2.0: overview

Calendar for Angular 2.0 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 2.0 snippets and explanations where needed.

CartesianChart for Angular 2.0: overview

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

  • Series - LineSeries, SplineSeries, AreaSeries, BarSeries, RangeBarSeries, BubbleSeries, ScatterBubbleSeries, ScatterSeries, OhlcSeries, CandlestickSeries
  • 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 RadCalendar's documentation section. The articles are extended with Angular 2.0 snippets and explanations where needed.

PieChart for Angular 2.0: overview

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

  • Series - PieSeries, DonutSeries
  • RadLegendView

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 2.0 snippets and explanations where needed.

DataForm for Angular 2.0: overview

DataForm for Angular 2.0 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 2.0 snippets and explanations where needed.

Installation

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