Getting started with Angular

To use Progress NativeScript UI with Angular you need to install the Progress NativeScript UI by executing tns plugin add nativescript-pro-ui

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 components and use them where needed

Using the 'NgModule' of the plugin's 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-pro-ui/'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.

The next snippet applies to the Pro flavor of Progress NativeScript UI. If you are using the free version, you can find the components in the "nativescript-pro-ui/'component name'/angular" folder of the package.

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 { NativeScriptUISideDrawerModule } from "nativescript-pro-ui/sidedrawer/angular";
// import { NativeScriptUIListViewModule } from "nativescript-pro-ui/listview/angular";
// import { NativeScriptUICalendarModule } from "nativescript-pro-ui/calendar/angular";
// import { NativeScriptUIChartModule } from "nativescript-pro-ui/chart/angular";
// import { NativeScriptUIDataFormModule } from "nativescript-pro-ui/dataform/angular";
// import { NativeScriptUIAutoCompleteTextViewModule } from "nativescript-pro-ui/autocomplete/angular";
// import { NativeScriptUIGaugesModule } from "nativescript-pro-ui/gauges/angular";

import { NativeScriptUIListViewModule } from "nativescript-pro-ui/listview/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,
        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.