Menu hamburger icon

Onsen UI Angular 2 Components coming soon!

Onsen UI bindings

Recently it may have looked like we’ve been focusing mainly on React, but we have also worked hard on bringing you components and directives for Angular 2. Next week they will be available through both npm and Monaca CLI.

Onsen 1.x was based on Angular 1, but with Onsen 2 we decided to take a different approach. We separated the core logic and styles, so that it can be used with any framework. We also started working on wrappers, so that it can be used in a more natural way in the most popular frameworks.

AngularJS 1 have been supported for quite some time already. Recently we released React Components and next week it’s time for the long awaited Angular 2. We are very excited about this release and we hope you are as well!

We can’t wait to see the amazing apps you create when combining the rich collection of components of Onsen UI with the power of Angular 2.

Seamless integration between Angular 2 and Onsen UI

Angular 2 and Onsen 2

We personally think that UI components should not be limited to a specific framework, but when used in one they should feel natural to use.

That is why when using Angular 2 Onsen UI components they will behave as if they were written entirely in Angular 2.

Using the directives will be as easy as going:

import {ONS_DIRECTIVES} from 'angular2-onsenui';

@Component({
  directives: [ONS_DIRECTIVES],
  ...
})

And in the template you can use all of them naturally:

<ons-list>
  <ons-list-header>My Items</ons-list-header>
  <ons-list-item *ngFor="let item of items">
    {{item}}
  </ons-list-item>
</ons-list>

But why Angular 2?

Road to Angular 2

Angular 1 was a big hit and a lot of people really liked some ideas which it brought to the table. One of the big downsides of Angular 1 was its performance. This issue has been addressed in the new version which is truly lightning fast.

Since it’s a major version they also had the ability to improve the API in a way which would encourage the best practices. While in Angular 1 controllers, views, directives were all scattered now the components are self-sufficient entities. The best parts of AngularJS 1 are still there but the Angular team has done a great job at removing the not so good parts. We believe AngularJS developers will feel right at home.

Also for better or worse it seems that a large part of the community is heading towards using TypeScript in their projects. You can still use pure JavaScript (or Dart), so it’s more of a matter preference rather than a requirement. Having used TypeScript for a while now, we can assure you that even though it might feel a bit daunting at first the static typing is very good for creating large scalable app.

We think Angular 2 is a great framework for creating mobile apps so we are very exciting about supporting it. Even if it’s still new, it has the full power of the Angular community behind it which means that there is already a lot of third-party libraries, plugins and directives being developed for it. We are proud to be able to contribute to that ecosystem.

So what comes next?

Next week we will release all the things you need in order to quickly start developing your first Onsen UI Angular 2 app.

That includes:

  • Guides on how to get started
  • Documentation for all components and features
  • Command Line Interface to get you up and running as fast as possible
  • And of course the components themselves (as an npm package)

When we release we will look more in depth into what Angular 2 is actually giving us, as well as templates to kickstart your development. Please look forward to it!

Comments