API Development

Updated Technical Preview for Titanium Angular

updated technical preview for Titanium Angular

With the introduction of our new webpack build, we also updated the technical preview of our Angular integration for Titanium.

As a first step, it now supports Angular 9, with upcoming updates adding support for Angular 10 and the new Ivy compiler. The most notable changes with this update are:

  • Updated for Angular 9
  • Uses the new webpack build for faster build times
  • Refactored implementation for ListView and TableView
  • Various bug fixes in ScrollableView, TabGroup and Dialogs
  • Fixed many bugs in the routing and added support for cross-platform NavigationWindow
  • Updated sample app with examples for all Titanium UI elements

We also updated the template for new Titanium Angular apps, which now includes a basic setup for routing and additional examples of data binding. Go check it out now!

Get started

Before you can create a new Angular powered project, ensure that you can run Titanium projects that use the new webpack build. Just follow the prerequisites outlined in our webpack guide to make sure you are all set.

After that is done, install a nightly build of Titanium SDK to get the latest changes required for Titanium Angular.

[appc] ti sdk install -b 9_2_X -d

The above command will automatically select the newly installed SDK as your active SDK using the -d flag. This will make sure that a new Angular project will be created with the up-to-date template from the nightly SDK build.

Now you are ready to create a new Titanium Angular project.

# appc-cli
appc new -t app —ng

# ti-cli
ti create -t app --template angular-default

To build the Angular project created above just use the usual build commands from the project directory.

# appc-cli
appc run -p [android | ios]

# ti-cli
ti build -p [android | ios]

Example app

The titanium-angular repository contains a sample app with tons of examples of how to use Titanium UI elements, data-binding, and navigate through the app using routing. It also shows how you can use shared components to easily style common UI elements and re-use them throughout your app.

Further reading

For more details, make sure to visit our Titanium Angular guide. If you want to know more about the new webpack build that powers Titanium Angular, head over to the webpack guide.