Getting started with Angular

To use a plugin which is part from Progress NativeScript UI with Angular you need to first install the corresponding plugin by executing tns plugin add nativescript-ui-<plugin-name>, for example tns plugin add nativescript-ui-chart

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

  • Import the NgModule of the UI component you want to use 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 components and use them where needed

Using the 'NgModule' of the plugins' UI components

When using NativeScript UI with Angular 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 and lazy loading.

Making your project compatible with 'Ahead of Time' compilation & 'lazy loading' of modules

In order to make your project compatible with AoT all that you need is to add the plugin's built-in modules to either your bootstrapped Angular NgModule or to each lazy loaded one. You can find the module for each UI component in the "nativescript-ui-'component name'/angular" folder of each 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.

The code snippet is from our live and runnable sdk project that takes advantage of lazy loading which is why the imported plugin modules are commented out because they are added to the imports of each lazy loaded module. If your project does not take advantage of lazy loading simply uncomment those and add them to the imports of the AppModule.

// --- The built-in 'nativescript-pro-ui' modules, if you are not using 'lazy' loading, uncomment and import the below modules into the 'imports' of the first ngModule (AppModule) of the app. 
// import { NativeScriptUICalendarModule } from "nativescript-ui-calendar/angular";
// import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
// import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
// import { NativeScriptUIAutoCompleteTextViewModule } from "nativescript-ui-autocomplete/angular";
// import { NativeScriptUIGaugesModule } from "nativescript-pro-ui/gauges/angular";

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";

// Not required imports, these are used by the nativescript-samples-angular SDK examples - https://github.com/telerik/nativescript-ui-samples-angular
import { NativeScriptRouterModule, NSModuleFactoryLoader } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NgModule, NO_ERRORS_SCHEMA, NgModuleFactoryLoader } from "@angular/core";
import { CommonModule } from "@angular/common";

import { AppComponent } from "./navigation/app.component";
import { routing } from "./app.routing";
import { OptionsService } from "./navigation/options/options.service";
import { ExampleItemService } from "./navigation/exampleItemService.service";
import { ExamplesListDepthComponents } from "./navigation/examples-list/examples-list.component";
import { OptionsComponent } from "./navigation/options/options.component";
import { COMMON_DIRECTIVES } from './navigation/directives';
import { CommonDirectivesModule } from './navigation/directives/common-directives.module';
import { TNSFrescoModule } from "nativescript-fresco/angular";


@NgModule({
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent,
        ExamplesListDepthComponents,
        OptionsComponent,
    ],
    imports: [
        NativeScriptModule,
        CommonModule,
        CommonDirectivesModule,
        TNSFrescoModule,
        NativeScriptUIListViewModule,
        NativeScriptUISideDrawerModule,
        NativeScriptFormsModule,
        NativeScriptRouterModule,
        routing
    ],
    exports: [
        NativeScriptModule,
        NativeScriptRouterModule
    ],
    providers: [
        OptionsService,
        ExampleItemService,
        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { 
}

The code snippet targets multiple components from the suite by importing all of the NativeScriptUI...Module exports.