Telerik UI for NativeScript with Angular 2.0: Getting started

To use Telerik UI for NativeScript with Angular 2.0 you need to install one of the two plugin flavors currently available:

  • Telerik UI for NativeScript
  • Telerik UI for NativeScript Pro

After installing the plugin, you have a couple of approaches to use the directives:

  • Import the NgModule of each UI component and add it ot the bootstrapped module of your {N} + Angular application, this will enable the use of Ahead-of-time compilation (AoT)
  • Bootstrap your application using the global NativeScript UI directives
  • Import the needed directives in your Angular 2.0 components and use them where needed

Using the 'NgModule' of the plugin's UI components

When using NativeScript UI with Angular 2.0 the best approach is to directly import the NgModule of each component rather than using the DIRECTIVES because when importing the modules you get the benefit of supporting AoT compilation for your project.

In order to make your project which uses the nativescript-telerik-ui plugin compatible with AoT all that you need is to add the plugin's built-in NgModules to your bootstrapped Angular module. You can find the module for each UI component at "nativescript-telerik-ui-pro/'component name'/angular" folder of the package, simply import those that are used in your project and add them to the imports. For more information on how to bundle your application please read the "Using Webpack to Bundle Your Code" article form the official NativeScript documentation.

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

// --- The built-in 'nativescript-telerik-ui-pro' modules
import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui-pro/sidedrawer/angular";
import { NativeScriptUIListViewModule } from "nativescript-telerik-ui-pro/listview/angular";
import { NativeScriptUICalendarModule } from "nativescript-telerik-ui-pro/calendar/angular";
import { NativeScriptUIChartModule } from "nativescript-telerik-ui-pro/chart/angular";
import { NativeScriptUIDataFormModule } from "nativescript-telerik-ui-pro/dataform/angular";
// ---

import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

@NgModule({
    bootstrap: [
        ...
    ],
    declarations: [
        ...,
    ],
    imports: [
        NativeScriptModule,
        NativeScriptUIListViewModule,
        NativeScriptUISideDrawerModule,
        NativeScriptUICalendarModule,
        NativeScriptUIChartModule,
        NativeScriptUIDataFormModule,
        NativeScriptFormsModule,
        NativeScriptRouterModule
    ],
    exports: [
        NativeScriptModule,
        NativeScriptRouterModule
    ],
    providers: [
        ...
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

The code snippet targets multiple components from the suite by importing all of the NativeScriptUI...Module exports and adding them to the imports of the bootstrapped @NgModule of your project.