Blog

Using Ignite UI widgets in Angular 2 application

Deyan Kamburov / Monday, January 18, 2016

This blog post will demonstrate the steps needed to create Angular 2 components with TypeScript. This example is using the Ignite UI igGrid widget.

Probably you are asking yourself, why Typescript? Well, Angular 2 is written in TypeScript and even though using TypeScript is not necessary, it provides better modularity and a few more goodies, like compile-time errors, auto-completion, etc.

Angular 2 and components

Even though Angular 2 is quite different from its predecessor, it was already popular even prior to its beta release, thanks to the popularity of Angular 1. Instead of using controllers, it relies on component-based UI and the main way to build elements and logic on the page is the Component class. Components basically consist of two things: view and logic. Components are forming the structure of an Angular 2 application. To specify that a class is a Component the annotation @Component should be applied to it.

Creating the igGrid component for Angular 2

Creating a Component in Angular 2 requires specifying a selector and a template. The ‘selector’ member is the DOM element where the ‘template’ will be loaded.

 1: selector: 'ig-grid',
 2: template: '<table></table>',

Another used member of the Component class (inputs) defines the configuration options of the grid.

 1: inputs: ['config:ig-options']

'config' is the name of the property inside of the Component class

'ig-options' is the name of the attribute inside of the template, whose class instantiates an ig-grid Component

All of this is showing how the initialization of an igGrid would look like:

 1: <ig-grid [ig-options]="opts"></ig-grid>

Here opts is defined inside the application component class, whose template is referring to the ig-grid Component.

Actually the initialization is really simple. There are four things which are required:

  • jQuery
  • Element
  • Name of the widget we want to create
  • Configuration options of the widget

igGrid Initialization

Ignite UI widgets depend on jQuery and in order to instantiate them, reference to the jQuery library is required. Representing it in the typescript file gives information for ability to use jQuery throughout the file:

 1: declare var jQuery: any;

Next there is a need of a DOM element on which we have to do the initialization. After the template of the custom component is resolved, the DOM element specified in the template is rendered into the DOM tree under the custom angular component. In this case the component is ig-grid and the element under it is the table element specified in our component's template.

Angular 2 is providing us with a reference to this DOM element of the ig-grid component in the Component's constructor.

 1: constructor(@Inject(ElementRef) elementRef: ElementRef) { 
 2:     this.elementRef = elementRef; 
 3: }

The name of the widget can be specified as a property of the Component class. This allow equivalent initialization for all of the Ignite UI widgets.

And finally extracting the configuration options. This one is handled by Angular 2.0 too. Defining a settable property 'config' in the Component class will do the trick.

 1: set config(v: any) { 
 2:     this._config = v; 
 3: }

Everything required is now populated and the igGrid can be initialized. This is done in the ngOnInit lifecycle event.

 1: ngOnInit() {
 2:     $(this.elementRef.nativeElement).children(':first')[this.name](this._config); 
 3: }

igGrid component in action

The igGrid Component is ready to use. Now what's left is to set up its configuration options inside of the application class and specify a template which contains:

 1: <ig-grid [ig-options]="opts"></ig-grid>

Conclusion

Angular 2 has a very impressive list of features and benefits. Probably the most remarkable ones are the performance and the simplicity. Stay tuned for full Angular 2 support in Ignite UI!

Download a sample demo.

Additional resources on the topic: