Over a million developers have joined DZone.

Using Ignite UI Widgets in Angular 2 Application

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

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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>


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:

This article was written by Deyan Kamburov.   

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

angular 2.0,ignite,web design and web development

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}