Angular for NativeScript

NativeScript doesn’t require Angular, but it’s even better when you use it.
You can fully reuse skills and code from the web to build beautiful, high performance native mobile apps. NativeScript features deep integration with Angular 2, the latest and greatest (and fastest) Angular framework.


We've put together a handy tutorial to get you started.

Angular + NativeScript Tutorial

Overview Video

Angular + NativeScript == ❤

The NativeScript core team works with the Angular team at Google to ensure NativeScript and Angular 2 are seamlessly integrated. If you know Angular, you’re already ready to develop amazing native mobile apps with NativeScript. With NativeScript and Angular 2, a single code base (and skillset) can be used to create web apps and native mobile apps with 100% native performance and power. Buttery smooth animations, direct access to 100% of the native platform APIs, it’s pretty amazing.

One skillset. One code base. Two apps: web and native mobile for iOS and Android:


Using Angular with NativeScript

Using Angular with NativeScript is a snap. From your terminal or command line, just start a new project with this command:

$ tns create my-angular-app --ng 


This will create a new NativeScript project with all of the necessary Angular files, folders and settings ready to go. By default, Angular projects use TypeScript, so NativeScript will also handle all of the TypeScript setup and configuration. Learn more about NativeScript and TypeScript.

Once you’ve got your project, it’s time to build your native mobile app! Use these resources to get started quickly:


Our documentation will help you learn the ins and outs of making truly native mobile applications with Angular and NativeScript.

Angular + NativeScript Docs

Why use Angular with NativeScript?

Application Structure and Plumbing

Angular provides all of the plumbing necessary to create high quality, highly maintainable NativeScript apps. Reuse Angular concepts such as data binding, dependency injection, services, and routing to build native mobile apps.

Code and Skill Reuse

Work smarter, not harder, right? Use Angular and TypeScript to build “native” apps for the web and, with NativeScript, for iOS and Android. You can even reuse JavaScript npm modules, as well as native iOS CocoaPod and Android Arsenal libraries, directly in NativeScript.

Native Mobile Performance

With NativeScript, you can finally create zero compromise mobile apps with Angular that feature truly native UI and performance. Enjoy glorious 60fps without being a CSS or JavaScript wizard, even on Android. Say goodbye to mobile jank.

Angular Community

Tap into the huge Angular developer community, more than 1 million strong, to get extra help, training and reusable code that can be directly applied to NativeScript mobile projects. NativeScript is the way for Angular developers to create native mobile apps.


  • When starting a new NativeScript Angular project, make sure to use the -ng flag to get the skeleton code.

  • In your views, do not use self-closing XML like <Label [text]="binding" />. Instead close all elements with a discrete closing tag: <Label [text]="binding"></Label> 

  • If you're planning to add NativeScript to an existing Angular "web" codebase, keep in mind window does not exist in NativeScript, therefore ensure to remove any explicit dependencies on the browser's global window object in your code.

  • Learn from the nativescript-angular project examples on the NativeScript Angular examples repository

  • Instead of using Angular's `ROUTER_PROVIDERS` and `ROUTER_DIRECTIVES`, use these:

    import {NS_ROUTER_PROVIDERS, NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';



  • Remember, there is no DOM in NativeScript, so separate layout from business logic for maximal reuse.

  • Use the NativeScript Angular Plugin Seed to quickly create your own NativeScript plugins for features your project needs.

  • Angular "Decorators" are powerful. Learn how to utilize them to maximize code sharing between web and native platforms.

  • Utilize Angular's `provide` api when setting up the dependency injector to provide substitutes for libraries/services that may have been built for the web. See an example

  • If you have a function callback that should be updating your view and it is not, you may need to run your callback through `zonedCallback`, a global defined by the NativeScript runtime. Potentially problematic code:

    1. this.someEventEmitter.on(‘someEvent’, (eventData: any) => {
    2.  // no bindings will update in the view
    3. });

    Since `zonedCallback` is a global, you can just declare it at the top of your file to suffice the `tsc` compiler:

    1. declare var zonedCallback: Function;
    2. this.someEventEmitter.on(‘someEvent’, zonedCallback((eventData: any) => {
    3.  // this will fire angular’s change detection properly
    4. }));

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript is licensed under the Apache 2.0 license .
© 2016 Progress Software Corporation. All Rights Reserved.