What does the powerful combination of Ignite UI and Angular 2 make possible for developers?

We have always striven to stay ahead of the curve with Ignite UI, thus with 16.2 we're introducing compatibility with the newly released Angular framework in two separate directions. We now have both Ignite UI Angular extensions on top of the Ignite UI you're already familiar with, as well as a brand new set of Angular native components, which we codenamed "Zero Blocks" and are now called JS Blocks.

The first part of this blog will focus on Ignite UI JS Blocks.
Ignite UI JS Blocks provides a mobile first collection of Angular UI components
and directives for rapid development and/or prototyping or progressive web applications.

Our UI components are following some of the key points introduced by Angular such as:

• Mobile development - desktop development is much easier when mobile performance issues are handled first
• Modularity - most of the components are exported as standalone modules so you get to pick exactly what you need in your application
• Modern browsers only - by reducing the need for browser compatibility workarounds, we keep the code tight and readable

Being build on top of the Angular framework our UI components are cross-platform,
mobile friendly and closely follow the Material Design specification assuring
a great user experience. The components are as lightweight and minimal as possible without sacrificing core features and usability. The main idea behind the toolkit is to serve as a foundation for your applications and your own components, hence the name 'blocks'.

For example here is how you can define a custom 'form'-like component for editing
an employee username:

and the end result:

Of course, all of Ignite UI JS Blocks is open-sourced under the MIT license so you are more than welcome to visit the the Github repository and contribute by providing suggestions, ideas and bug reports. Also this is the place to find the latest
documentation and a full listing of all components and directives included in the package.

The second part of this blog is about Ignite UI Angular 2 Components. Angular 2 Components are open source and are wrapping the Ignite UI widgets to provide complete Ignite UI experience inside the Angular2 world.

Angular 2 is Cross Platform and can be used on different devices or operating systems. All this can be easily integrated with Ignite UI Components being also cross platform,responsive and touch - first.  This is great and very useful, but this is not their most important advantage. If there is a need of big data, quick interactions with the components and a requirement for performance, Ignite UI Angular 2 Components are the right toolset. It can be included as part of any Angular 2 application and this will expose their capabilities. Here you can find samples, demonstrating Ignite UI Angular2 Components.

Angular 2 is considered easier to learn and more intuitive than AngularJS. They are quite different and shouldn't be compared, but creating a component in Angular 2 really seems easier. And including Ignite UI Angular 2 Component to Angular 2 application is even easier.

Here’s an example of using an igGrid inside Angular 2 app, Include IgGridComponent as a declaration of NgModule, then apply initialize in the template with its corresponding options and add the references to IgniteUI into your index.html.

Also note that every Ignite UI Angular 2 component is extended from the Angular 2 @Component so they are actually components and can be used and integrated natively and easily in every Angular 2 application as easy as any Angular 2 @Component.

Another important aspect for developing Angular 2 application is the productivity. That’s why Ignite UI Angular 2 Components have included Ignite UI TypeScript definitions into its package so that the developer can take advantage of the intelligent code completion and instant errors, which allows easier configuration of the Components. Please refer to the following screenshot.

If gridOptions are specified as being the interface of the grid configuration this automatically grants access to the goodies provided from the IDEs - for example, possible list of options, their types and a brief description how to use specific option.

Ignite UI Angular 2 Components are the solution which provides access to the complete Ignite UI toolkit inside of a context in Angular 2 app. In addition to everything provided from Ignite UI widgets, there is included a set of extra Angular 2 related features like:

• Full Angular 2 initialization of the Ignite UI Angular 2 Component
• Handling events in Angular 2 world
• Two way data binding for the data bound components

But the most important argument behind this is a combination of requirements like:

• Angular 2 enterprise application
• Big data
• High performance capabilities
• Quick interactions
• Modern Grids, Charts, Editors, etc.