Bilal Haidar for This Dot

Posted on Oct 24, 2019 • Edited on Oct 26, 2019 • Originally published at labs.thisdot.co

Ignite your way with Infragistics Ultimate Developer Toolkit

#infragistics #igniteui #javascript #angular

Infragistics is celebrating its 30th anniversary! Throughout the years, Infragistics built its strategy around two strong pillars: embracing the latest and greatest technologies, and focusing on high-performance and speed. These main pillars enriched developers, and their communities, with toolsets that made development enjoyable, and productive at the same time.

Infragistics presents the Ultimate suite as a single platform for UX design, and enterprise app development, for the web, desktop, and mobile. The suite offers more than 100 beautifully styled, high-performance grids, charts, and other UI controls.

Infragistics thought of every detail in the development life-cycle process. They offer prototyping tools to help you sketch your designs from the client’s early inception stage, allowing you to work on the UX, finalize the layout, and even orient the developer to build the final app.

In this introductory article on their Ignite UI suite, I will explore the different platforms supported by Infragistics, and will then delve into more details on the Ignite UI for Angular suite.

Infragistics Ultimate Developer Toolkit

Infragistics provides UI components for a variety of frameworks and platforms. This includes ones for the Web (ASP.NET, Angular, React and JavaScript), Desktop (Windows Forms and WPF), and Mobile (Xamarin, iOS and Android).

The components are served in packages. For instance, when developing with React, you would only install the packages for Ignite for React.

Here’s a list of the supported platforms and their corresponding components.

Web

Indigo Design
A unified workspace for visual design, UX prototyping, and code generation for Angular development.

Ignite UI for Angular
Infragistics wraps together more than 50 Material-based UI native components, designed, and built on an Angular platform.

Ignite UI for React
A set of native UI components for React developers, featuring a high-performance data grid, and real-time high-volume data charts.

Ignite UI for JavaScript
This package offers more than 100 HTML5 / JavaScript jQuery components with wrappers for React, Angular & ASP.NET MVC.

Infragistics Ultimate UI for ASP.NET
ASP.NET AJAX UI controls.

Desktop

Infragistics Ultimate UI for Windows Forms
This package contains more than 100 fully-featured Microsoft Office-style UI controls.

Infragistics Ultimate UI for WPF
This package contains WPF native UI controls.

Mobile

Infragistics Ultimate UI for Xamarin
This package contains Xamarin native UI components including Charts, Grid, Scheduling, and much more.

Infragistics Ultimate UI for iOS
This package contains native UI controls for both iPad and iPhone apps.

Infragistics Ultimate UI for Android
This package contains lightning-fast native UI controls for Android apps.

Prototyping

Infragistics offers the Indigo.Design Desktop to build prototypes for User Stories to share with peers for review, and collaboration. This software comes in two flavors for both Windows and Mac OS machines. Here’s a link to the software’s official documentation.

In addition to all the packages listed, Infragistics puts great effort in delivering an easy-to-follow, and extensive documentation for all their platforms, and UI components. You can consult the document anytime by visiting the Infragistics Help documentation website.

Also, Infragistics offers a set of reference apps that you can look at, take ideas from, and that allow you to see, in real-time, how the UI components are being used and integrated inside apps. You can have a look at the reference apps by visiting the Infragistics Apps Gallery website.

Ignite UI for Angular

Infragistics has placed a great emphasis on developing their Angular suite. They offer native UI components for Angular that are based on the Google Material design standards. In addition, they enrich the Angular app development with a unique, and valuable experience, by offering the Sketch UI kits.

The Sketch UI kits have a one-to-one mapping with all the Angular components they offer. The designer opens Sketch, loads the Sketch UI kits, and then designs the app screens, using “native” Ignite UI for Angular components. The end result is a prototype that is uploaded to the Infragistics Cloud, and shared with peer developers, designers, and stakeholders to review, comment on, and use to produce a final design prototype.

The developers can then take prototype URLs, go to Visual Studio Code per se, install the Infragistics extension, and generate code assets for their Angular app, based on the prototype. The extension generates Angular Components based on the screens baked inside the prototype.

The Ignite UI for Angular suite aims to help developers build modern, high-performance HTML 5 JavaScript apps for modern desktop browsers, mobile experiences, and progressive web apps (PWA).

Prerequisites

Before you can start using Ignite for Angular, you must have the following installed on your machine:

Visual Studio Code (VS Code). You can use any other code editor, but in order to make full use of the rich support Infragistics offers for Angular development, it is recommended that you use VS Code.
Node.js and NPM. This requirement is standard for developing front-ends using Angular, React, Vue and even vanilla JavaScript.

Ignite UI CLI

Infragistics takes that extra step, and offers the Ignite UI CLI. This is a Command-Line Interface by Ingratistics.

The easiest way to create, and scaffold an app with Infragistics, is to use the CLI. This CLI is not only used with Angular, but can also be used for React and jQuery apps.

Here’s a step by step guide on how to generate your first app using the Ignite UI CLI.

You start by installing the Ignite UI CLI as a global dependency on your machine by issuing the following command:

npm install -g igniteui-cli

Once the installation process is finished, you can start the tool using either guided experience or specific commands.

For instance, to create a new Angular app, you issue the command:

ig new <project name> --framework=angular --type=igx-ts

To add a new Component to your app you issue:

ig add <component/template> <component_name>

You can read more about the CLI on the Ignite UI CLI official page.

Selection of Angular Components

Going through all of the Angular components in depth now, isn't useful. I have highlighted a few that interested me, and will give you a small overview of what is offered.

Financial Chart

The Financial Chart is one of the most popular and advanced charts offered by Infragistics. This type of chart is used to visualize financial data using a simple, and intuitive API.

To play with a live Financial Chart, here’s a sample hosted on StackBlitz:

Data Chart

Infragistics Angular Data Chart is the most extensive, and feature-rich, chart on the web today. It supports chart compositions (multiple charts overlaid), axis, series, legend, and annotation layers. Being highly customizable, it offers many more options, and features.

Something special about this chart is the long list of series types supported by default. The list includes, but is not limited to:

An example of a Radial Series chart is as follows:

You can find the entire list here: Data Chart Series Types.

To play with a live Data Chart, here’s a sample hosted on StackBlitz:

Mask

You apply the igxMask directive on a text input field, and you can control the user input, and format the visual value, based on configurable mask rules. You have a rich set of masking rules to choose from.

To use this directive, start by importing the following Angular Modules into your app module:

// app.module.ts

...
import { IgxMaskModule, IgxInputGroupModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxInputGroupModule, IgxMaskModule]
    ...
})
export class AppModule {}

Then you can apply an Input Mask inside your components. The example below shows how you can use a Phone Input Mask:

<igx-input-group>
    <igx-prefix>
        <igx-icon>phone</igx-icon>
    </igx-prefix>
    <label igxLabel>Phone</label>
    <input igxInput type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'"/>
</igx-input-group>

If you would like to play with a live Mask component, here’s a sample hosted on StackBlitz:

Navigation Drawer

The Navigation Drawer is one of my favorite components. It provides a smooth and smart navigation experience for developing Web apps that will be used on Mobile devices.

The Navigation Drawer is a side-navigation container. It can rest above content, and slide in/out of view or be pinned to expand/collapse within content. The component is highly configurable via its input properties: Mode (pinned, open, mini-variant) and Position (Right and Left). The mini-variant mode renders the side-navigation bar with icons only instead of showing both the icon, and text of the item.

Installing and using this component is no different from the rest of component offered by Ignite for Angular.

To play with a live Navigation Drawer component, here’s a sample hosted on StackBlitz:

Layout Manager

The Layout Manager directive, which is part of Ignite UI for Angular, is a wrapper on-top of Flexbox. You can organize and structure your HTML markup without having to write a single CSS selector for the layout.

The Layout Manager focuses on giving Angular developers a seamless design experience when developing, and laying out their apps.

To use this directive, start by importing the IgxLayoutModule Angular Module into your app module:

// app.module.ts

...
import { IgxLayoutModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxLayoutModule ]
    ...
})
export class AppModule {}

Then you can apply the igxLayout, igxFlex, and other related directives to your HTML markup as follows:

<div class="layout-box" igxLayout igxLayoutDir="row">
              <div class="layout-box__el" igxFlex>1</div>
              <div class="layout-box__el" igxFlex>2</div>
              <div class="layout-box__el" igxFlex>3</div>
</div>

If you would like to play with a live Layout Manager component, here’s a sample hosted on StackBlitz:

DataGrid

Infragistics claims to have developed the fastest high performance Data Grid for Angular platform.

The Grid is, by far, the most customizable Data Grid currently existing for the Angular ecosystem. The team at Infragistics have thought of every single detail a developer might need and want to customize in a Data Grid.

The features include data binding, live data binding (data streaming), editing, row editing, paging, filtering, advanced filtering, sorting, grouping, column moving, column pinning, column resizing, column hiding, searching, toolbar, multi-column header, exporting to Excel, pasting from Excel, and so much more.

You are in the presence of the Infragistics version of Excel Spreadsheets!

Importing and using the Data Grid cannot be simpler!

Start by importing the IgxGridModule Angular Module to the app module:

// app.module.ts

import { IgxGridModule } from 'igniteui-angular';
// Or
import { IgxGridModule } from 'igniteui-angular/grid';

@NgModule({
    imports: [
        ...
        IgxGridModule.forRoot(),
        ...
    ]
})
export class AppModule {}

To embed a Data Grid inside the HTML markup, add the following component:

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="true"></igx-grid>

To reference the Data Grid from inside the Angular Component code-behind, add the following:

import { IgxGridComponent } from 'igniteui-angular/grid/';
// Or
import { IgxGridComponent } from 'igniteui-angular'
...

@ViewChild('myGrid', { read: IgxGridComponent })
public grid: IgxGridComponent;

It’s that straightforward to start using the Data Grid component for Angular!

Check the Infragistics extensive docs to learn more about customizing, and enabling more features in the Data Grid.

If you would like to play with a live Data Grid component, here’s a sample hosted on StackBlitz:

Excel Library

An Excel Library comes as part of the Ignite UI for Angular. The Infragistics Angular Excel Library allows you to work with spreadsheet data using familiar Microsoft Excel spreadsheet objects like Workbooks, Worksheets, Cells, Formulas, and many more.

You can export your app data to an Excel sheet, and also load data from an Excel sheet into your app.

Have a look at the Excel Library page for more examples on all the options, and possibilities available for you.

Moreover, Infragistics offers an Export to Excel service that you can use inside your Angular components, and services.

To use this service, you start by importing the IgxExcelExporterService into the app module:

// app.module.ts

...
import { IgxExcelExporterService } from "igniteui-angular";

@NgModule({
  providers: [ IgxExcelExporterService ]
})

export class AppModule {}

Then, you inject the IgxExcelExporterService into the constructor of the component or service:

// component.ts

...
import { IgxExcelExporterService, IgxExcelExporterOptions } from "igniteui-angular";
...

constructor(private excelExportService: IgxExcelExporterService) {
}

And finally, to export your data to Excel, you call the exportData() function:

// component.ts

...

public localData = [
  { Name: "Eric Ridley", Age: "26" },
  { Name: "Alanis Brook", Age: "22" },
  { Name: "Jonathan Morris", Age: "23" }
];

public exportButtonHandler() {
  this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions("ExportedDataFile"));
}

Indigo Design System

The Indigo Design System offered by Infragistics caught my attention to the extent that I wanted to dedicate a section to talk about this design system, and its versatility, especially for designers, and developers working on Angular apps.

Indigo Design System offers a unified platform for visual design, UX prototyping, code generation, and app development.

You’ve got your designers, and developers, both integrated into a single platform. This design system has a workflow that is depicted as follows:

Designers create designs in Sketch using the Indigo.Design System. The Indigo Design System integrates with Sketch in the form of:
1. Indigo-Components (Design library with 50+ components that match Ignite UI for Angular)
2. Indigo-Patterns (A collection of common UI patterns composed of Indigo-Components)
3. Indigo-Styling (Customize colors, typography, icons, and elevations to match your brand)

2- Designers share and test prototypes with peer developers, designers, and stakeholders, via a common platform known as cloud.indigo.design.

Use Sketch to create interactive prototypes of your designs and screens.
Share and Collaborate with others: View prototypes on any device, and collect feedback using comments.

3- Developers generate Angular components, and code from prototypes

Install the Infragistics Extension for VS Code
Load-in a prototype by URL and the code generation process starts

Conclusion

To explore and try all the features of Infragistics Ultimate Developer Toolkit, would require writing books and articles! This article introduces the Infragistics Ultimate Developer Toolkit, and related hyperlinks, that you can follow to read more about the topics.

Still, what has been discussed in this article is the tip of the iceberg when it comes to what the modern and efficient development ecosystem Infragistics offers!

The Infragistics design model for their components and controls is, by far, one of the easiest, and most straightforward model to follow. For instance, when using the Ignite UI for Angular components, you get the feeling that you are using Angular built-in components and services. They’ve done an excellent job giving Angular developers a seamless experience when using their UI components.

This Dot Inc. is a consulting company which contains two branches : the media stream and labs stream. This Dot Media is the portion responsible for keeping developers up to date with advancements in the web platform. In order to inform authors of new releases or changes made to frameworks/libraries, events are hosted, and videos, articles, & podcasts are published. Meanwhile, This Dot Labs provides teams with web platform expertise using methods such as mentoring and training.

DEV Community