Pyramid charts are very popular visualizations when working with demographics as they are an easy way to show the age and male/female composition of a given country. While line charts are very common when describing the growth scale of any population, pyramids are preferred as they are ideal to detect any changes or significant differences.

What are Stacked Charts?

Stacked charts are basically bar, area, or column charts that do not overlap because they are placed on top of each other. Stacked bars, for example, present information in a horizontal comparison and are meant to help users visualize how each piece of data correlates to the whole data set.

ReportPlus steps up to the plate by adding a new feature for users: the ability to present stacked charts with a percentage distribution instead of the default 0-100 scale.

Why not use a Bar Chart instead?

In the case above, where what’s being compared is a set of aging ranges, bar charts would only be helpful when representing data by year. Take a look at the data below: the first one is a bar chart plotted by year, and the second one is the equivalent to the stacked chart above.

If you really need to see your data broken down by the exact dates, bar charts just aren’t the correct fit.

How this relates to Population Pyramids

Population pyramids usually display not one data series, but two: age and female/male ratio. You’ll therefore need to use a chart that supports two or more series.

Sample Population Data

Let us consider the following figures to create the visualization in the screenshot above. These include the age ranges for Seattle inhabitants along with the male/female population ratio.

When we create the widget in ReportPlus and choose the Stacked Bar visualization, the data will be plotted in the following way:

In order to create a pyramid, we’ll need the values for male and female to point in two different directions. Therefore, let’s create a calculated field that displays the opposite of the male population:

Then, hide your original “Male” field by toggling the “Is Visible” slider.

Your visualization will now look like the following one:

Formatting your Data

If you want or need, you can format the negative values in a different way by changing the “Negative number format”.

If you want the pyramid to show the values from highest to lowest, change one of the genders’ Sorting to “Asc”:

By default, the theme will be set to “The Blues”. Change your theme to any of ReportPlus’ more than 20 themes if you want to have more contrast between the figures.

Interested in trying this out?

Download a free trial of ReportPlus Desktop or ReportPlus iOS now, or contact us to get this ready for you!

Interacting with Forms

By: Jared Fineman

When we think of forms, we may have visions of a stack of papers, piled on a waiting room table in a doctor’s office. However distant web forms may be from that concept, in terms of tediousness, a lot remains the same. Whether it be laying them out, styling them, or simply binding them, forms can be a chore in their own unique way and nothing changes when it comes to unit testing. Thankfully, by leveraging the Angular Unit Testing Library, we can streamline the process.

Let’s start by examining a unit test for the completion of a form:

it('should activate done button when complete’, async(() => {
  const fixture = TestBed.createComponent(LocationOptionsComponent);

  fixture.detectChanges(false);

  let inputs = fixture.debugElement
.queryAll(By.css('input.form-ontrol:not(.filter-input)'));

  let combos = fixture.debugElement.queryAll(By.directive(TypeaheadComponent));
        
  let doneBtn = fixture.debugElement
.queryAll(By.css('.star-grid-header-buttoncontainer input'))[1];

  ...

As we can see from the description of the unit test, the done button should only become active after the form is in a state of completion. We begin by querying the created component in order to find the form and all of its elements.

One thing to note is the power of the queryAll method of the Angular library; it is able to use a complex css selector to return a collection of DebugElement objects that represent the inputs of the form. Alternatively, the queryAll method can be passed a value type of directive or component as a parameter and it will return all corresponding matches. For more information about the query method, please see my previous article titled, "Demystifying Angular Unit Tests: Part 2: The Anatomy of an Angular Spec File".

At this point in the unit test, we have a collection of all the various inputs, some simple and others more complex, like drop-down menus or autocomplete fields. The challenge here is being able to simulate interactions with each component properly in order to test the various form dynamics. The following sections will illustrate how we locate and interact with each particular field, using the Angular library:

 optionNameInput.nativeElement['value'] = 'Testing';
 optionNameInput.nativeElement.dispatchEvent(new Event('input'));

We begin by examining a variable named optionNameInput in order to gain a better understanding behind some of the key concepts in unit testing forms. The optionNameInput, as well as the other field variables, are all of type DebugElement, a powerful class for unit testing. This class has a property called nativeElement, by which we can directly access and manipulate the field value in the DOM. This is insufficient, however, to activate Angular’s event detection. In order to do that, we will need to simulate an input event using the dispatchEvent method; doing so will then trigger data binding, validation, as well as any event listeners.

We have just successfully simulated an input event for our unit test, but how would we handle something more complex like selecting an option from a drop-down menu or an autocomplete field?

optionTypeInput.nativeElement.dispatchEvent(new Event('input'));
 activeInput.nativeElement.dispatchEvent(new Event('input'));

Similar to the input field, our autocomplete variables, optionTypeCombo and activeCombo, require an event to be fired in order to activate change detection, and in turn, expand the option menu. We handle this by first calling the dispatchEvent method, followed by a strange call to a method called whenStable.

fixture.whenStable().then(() => { ... }

As described in the Angular site documentation, whenStable is responsible for returning a promise after the completion of an asynchronous event. In order for us to catch the event of the autocomplete menu opening, we need to nest the continuation of our code within the returned promise of the whenStable call.

let locationOption = optionTypeCombo.query(By.css('button')).nativeElement;
    locationOption.dispatchEvent(new Event('click'));

let activeOption = activeCombo.query(By.css('button')).nativeElement;
    activeOption.dispatchEvent(new Event('click'));

Now that it has open, we are ready to make a selection from the autocomplete menu. Using the query method of the DebugElement object, we are able to find the first autocomplete field option, represented by a button element. Once again, we call the dispatchEvent method, but this time passing in a click event, to simulate selecting the first option.

fixture.detectChanges();

 expect(doneBtn.properties['disabled']).toBe(false);

After a quick call to detectChanges, which starts the Angular detection process, we are ready to check if the form is in a complete state, our primary indicator being an active done button. We have already queried and saved the done button as a variable of type DebugElement; using its properties value, we can now detect the disabled status of our button.

If you like this post, please like it and share it. In addition, if you haven’t checked out Infragistics Ignite UI for Angular, be sure to do so! They’ve got 50+ Material-based Angular components to help you code speedy web apps faster.

I am excited to announce the first event in Korea and we invite developers in Korea!

Jason Beres, Sr. VP of Developer Tools and Satoru Yamaguchi, Solution Consultant will be visiting Seoul and they are going to introduce our latest products and provide free hands-on sessions for developers who are interested in building Modern Desktop and Web Applications using WPF and Angular.

Event Overview:

Contact: BluePort (02-569-3712 / sales@blueport.co.kr)

* English to Korean translation is provided

You can find detailed schedule and agenda here (Korean).

Registration:

There are two sessions on the day. Please pick one of them or both to sign up.

Morning Session - Angular

Afternoon Session - WPF

We are looking forward to seeing you all in Korea!

Change Detection means updating the DOM whenever data is changed. Angular provides two strategies for Change Detection.

1. Default strategy
2. onPush strategy

In default strategy, whenever any data is mutated or changed, Angular will run change detector to update the DOM. In onPush strategy, Angular will only run change detector only when new reference is passed to @Input() data.

To update the DOM with updated data, Angular provides its own change detector to each component, which is responsible to detect change and update the DOM. 

 Let us say we have a MessageComponent as listed below:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-message',
  template: `
    <h2>
    Hey {{person.firstname}} {{person.lastname}} ! 
    </h2>
    `
})
export class MessageComponent {

  @Input() person;
}

In addition, we are using MessageComponent inside AppComponent as below,

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
  <app-message [person]='p'></app-message>
  <button (click)='changeName()'>Change Name</button>
  `
})
export class AppComponent implements OnInit {
    p: any;
    ngOnInit(): void {
        this.p = {
            firstname: 'Brad',
            lastname: 'Cooper'        };
    }
}

Let us talk through the code: all we are doing is using MessageComponent as child inside AppComponent and setting value of person using the property binding. At this point on running the application, you will get name printed as output.

Next, let us go ahead and update firstname property on the button click in AppComponent class below:

changeName() {
  
    this.p.firstname = 'Foo';
}

As soon as we changed the property of mutable object P, Angular fires the change detector to make sure that the DOM (or view) is in sync with the model (in this case object p). For each property changes, Angular change detector will traverse the component tree and update the DOM.

Let us start with understanding about component tree. An Angular application can be seen as a component tree. It starts with a root component and then go through to child components. In Angular, data flows from top to bottom in the component tree.

Whenever @Input type property will be changed, Angular change detector will start form the root component and traverse all child components to update the DOM. Any changes in primitive type’s property will cause Angular change detection to detect the change and update the DOM.

In above code snippet, you will find that on click of the button, the first name in the model will be changed. Then, change detection will be fired to traverse from root to bottom to update the view in MessageComponent.

There could be various reasons of Angular change detector to come into action and start traversing the component tree. They are:

1. Events fired such as button click, etc.
2. AJAX call or XHR requests
3. Use of JavaScript timer functions such as setTimeOut , SetInterval

Now, as you see,  a single property change can cause change detector to traverse through the whole component tree. Traversing and change detection is a heavy process, which may cause performance degradation of application. Imagine that there are thousands of components in the tree and mutation of any data property can cause change detector to traverse all thousand components to update the DOM. To avoid this, there could be scenario when you may want to instruct Angular that when change detector should run for a component and its subtree, you can instruct a component’s change detector to run only when object references changes instead of mutation of any property by choosing onPushChangeDetection strategy.

 You may wish to instruct Angular to run change detection on components and their sub-tree only when new references are passed to them versus when data is simply mutated by setting change detection strategy to onPush.

Let us go back to our example where we are passing object to MessageComponent. In the last example, we just changed firstname property and that causes change detector to run and to update the view of MessageComponent. However, now we want change detector to only run when reference of passed object is changed instead of just a property value. To do that let us modify MessageComponent to use OnPush ChangeDetection strategy. To do this set changeDetection property of @Component decorator to ChangeDetectionStrategy.OnPush as shown in listing below:

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'app-message',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
    <h2>
    Hey {{person.firstname}} {{person.lastname}} !
    </h2>
    `
})
export class MessageComponent {

    @Input() person;
}

At this point when you run the application, on click event of the button in AppComponent change detector will not run for MessageComponent, as only a property is being changed and reference is not changing. Since change detection strategy is set to onPush, now change detector will only run when reference of @Input property is changed.

changeName() {
  
    this.p = {
        firstname: 'Foo',
        lastname: 'Kooper'    };
}

In the above code snippet, we are changing reference of object instead of just mutating just one property. Now when you run application, you will find on the click of the button that the DOM is being updated with new value.

By using onPush Change Detection, Angular will only check the tree if the reference passed to the component is changed instead of some property changed in the object. We can summarize that, and Use Immutable Object with onPush Change Detection to improve performance and run the change detector for component tree when object reference is changed.

 We can further improve performance by using RxJS Observables because they emit new values without changing the reference of the object. We can subscribe to the observable for new value and then manually run ChangeDetector.

 Let us modify AppComponent to pass an observable to MessageComponent.

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Component({
    selector: 'app-root',
    template: `
  <app-message [person]='data'></app-message>
  <button (click)='changeName()'>Change Name</button>
  `
})
export class AppComponent implements OnInit {
    p: any;
    data: any;
    ngOnInit(): void {
        this.p = {
            firstname: 'Brad',
            lastname: 'Cooper'        };
        this.data = new BehaviorSubject(this.p);
    }

    changeName() {

        this.p = {
            firstname: 'Foo',
            lastname: 'Kooper'        };
        this.data.next(this.p);
    }
}

In the code, we are using BehaviorSubject to emit next value as an observable to the MessageComponent. We have imported BehaviorSubject from RxJS and wrapped object p inside it to create an observable. On the click event of the button, it’s fetching the next value in observable stream and passing to MessageComponent.

 In the MessageComponent, we have to subscribe to the person to read the data.

@Input() person: Observable<any>;
_data;

ngOnInit(){
    
    this.person.subscribe(data => {
        this._data = data;

    });
}

Now, on click of the button, a new value is being created, however, a new reference is not being created as object is an observable object.  Since a new reference is not created, due to onPush ChangeStrategy, Angular is not doing change detection. In this scenario, to update the DOM with new value of observable, we have to manually call the change detector as shown below:

export class MessageComponent implements OnInit {

    @Input() person: Observable<any>;
    _data;

    constructor(private cd: ChangeDetectorRef) { }
    ngOnInit() {

        this.person.subscribe(data => {
            this._data = data;
            this.cd.markForCheck();
        });
    }
}

We have imported ChangeDetectorRef service and injected it, and then calling markForCheck() manually to cause change detector to run each time observable emits a new value.  Now when you run application, and click on button, observable will emit new value and change detector will update the DOM also, even though a new reference is not getting created.

To summarize:

1. If Angular ChangeDetector is set to default then for any change in any model property, Angular will run change detection traversing component tree to update the DOM.
2. If Angular ChangeDetetor is set to onPush then Angular will run change detector only when new reference is being passed to the component.
3. If observable is passed to the onPush change detector strategy enabled component then Angular ChangeDetctor has to be called manually to update the DOM.

 I hope you find this post useful. Thanks for reading.  If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 30+ material based Angular components to help you code web apps faster.

While one might reasonably argue that sales is the lifeblood of any organization (especially if you’re responsible for reporting on P&L), customer engagement is, at a minimum, a major contributing factor. What should a business do then, when it is interested in creating or improving the level of engagement between their customers and themselves?

Traditional Problem

When the primary “product” consists of services, businesses create applications that they believe will meet the needs of their users. With the best of intentions, meetings are held, decisions are made, requirements are gathered, and code is written. To much internal fanfare, the application is released, and confident product owners wait anxiously, hoping for large scale engagement. To ensure customers are aware of the application’s existence, marketing talent is brought to bear - mail is sent out, press releases published, conferences attended, and t-shirts given away.

Traditional Result

What tends to happen next is all too common. The application, which met the needs of the business, and seemed like it should have met the needs of customers, didn’t. For some reason, users were uninterested, downloads dropped to the point that reporting on them became awkward, and eventually, the application stopped being supported and faded away. Why did this happen?

User Experience Solution

Contrary to what might seem the obvious solution, the key to driving large scale engagement is not creating a method by which users tell the business what they want. While this might be sufficient to drive incremental improvement, users are only able to articulate their obvious needs: “I want access to my services,” “I want to be able to pay my bill,” “Make it easy for me to see my coverage details.” These are all fine and obvious bits of functionality that users believe they want, but there is another set of requirements – latent requirements – that define features and functionality that will improve users’ lives in ways they cannot describe or request.

User Experience Research

The next question is, since users aren’t able to articulate their latent requirements, how do we know they exist? Assuming they exist, how can we hope to define them? The answer to both questions is User Experience Research. By employing on-site observations (a technique known as shadowing) and intelligent interviewing (a technique known as contextual inquiries), an experienced UX team is able to identify key user groups, define existing workflows, task frequency, significant bottlenecks and problem areas, device usage, etc., essentially inferring users’ latent requirements. Based on this understanding, they can coordinate this information into a unified set of stated and latent requirements, completely defining the problem areas within a user’s professional environment. This coordinated set of requirements defines the space within which users are willing to engage with the business. The level of engagement, therefore, is limited only to the degree that the solution resolves users’ problems.

User Experience Process & Deliverables

I’ve made some gross assumptions to show what such a research project might look like for a B:B application, such as an insurance application designed for medical professionals. Please keep in mind that any or all of these can be modified, and need not happen sequentially, depending on circumstances and business needs.

Small Office Research (3 people)

• UX team onsite for 2 days
• One day to coordinate findings

Medium Office Research (10 people)

• UX team onsite for 4 days
• Two days to coordinate findings

 Large Office Research (10+ people)

• UX team onsite for 8 days
• Three days to coordinate findings

 Deliverables

• User Profiles/Personas
• Workflows/Journey Maps
• Informational Needs by User Type
• Frequency of Use Metrics
• Recommended Application Formats (web, mobile web, native web)
• Application Wireframes
• Full Aesthetic Designs
• Front-End Development

The UX process is almost infinitely malleable. Ultimately, it comes down to understanding the risks associated with how you spend your research dollars, the experience of your UX team, and the relationship between time, money, and representative sample size. Customer engagement is about proactively understanding what customers need and how to make it available at the right time, in the most useful format, not about reactively working through a list of feature requests.

Design at Infragistics

Here at Infragistics Consulting, we pride ourselves on delivering thoughtful and useful design. Getting the job done isn't the same as getting the job done well and we sweat the small stuff because it matters. Let us show you how we can help by contacting us at services@infragistics.com.

With all of the recent exciting changes in Angular v6’s release and the large shift in both the enterprise and SMB market towards adopting Angular as the go-to framework for building business applications, Infragistics is making sure to stay on the cutting edge of web development. Speaking to the ripple effect Angular has had in modern web development, our Angular team has been vocal about their plans to give web developers accessibility and ease when working with Angular on their upcoming projects. By providing tools for the upcoming wave of developers moving to building line of business applications in Angular, we’re making sure that we deliver best of breed UI components and the fastest Angular data grid with our products, Ignite UI for Angular and Ignite UI CLI.

Recently, we’ve been working on adding another product to our Angular productivity line, Indigo Design to Code Studio. Announced at Google I/O, Indigo D2C Studio is a digital product design platform that brings developers and designers together to build amazing user experiences. For example, once the iterative design process is complete, developers can use the Indigo D2C Studio Visual Studio Code plug-in and UI components to create a pixel-perfect Angular or Flutter application for Android and iOS. The product is highlighting Infragistics’ goal in working closely with Google’s Angular team to develop forward-thinking tools for web, desktop, and mobile applications, so be sure to read the latest press release and sign up for the upcoming preview.

As it follows, the team has been eager to share their goals and progress with the community, notably sitting down with JAXenter, the international technology website and news platform. In the interview and subsequent article, Infragistics' Radoslav Karaivanov, Sr. Software Developer, and Konstantin Dinev, Manager of Product Development, highlighted that they'll continue to work with each Angular release, as Konstantin notes, "Our goal is to be lock-step with the Angular releases from Google – our customers move quickly to take advantage of new Angular features, and they expect Infragistics products to ‘just work’ when their teams start new app dev in the latest version of Angular"

So, what’s new about Angular 6 and why is our dev team so excited?

Angular v6 has a laundry list of exciting new features that make building Angular apps easier and continues to drive the message that Angular is ‘enterprise-ready’.  When discussing the updates, Radoslav offered that, “The new features are compelling; Angular Elements could really increase the usage of the framework, even just to transform parts of legacy web apps into web components.”

On top of that, Radoslav also couldn’t ignore the sheer appeal and support that’s offered with a framework developed by Google. He had chuckled as he said, “At least you know you won’t be out in the wild,” given that Angular is providing a full package of the framework from one of the leading tech companies in the world.

Even aside from the fervor around support and Elements, let’s go through a brief rundown what’s caught developers’ eyes with the latest release:

• Synchronization of all major versions for the framework packages, the CLI, and the Material/ CDK to help with cross compatibility.
• Two new CLI commands, ng update and ng add. With ng update, your package.json will be analyzed and recommendations for dependency updates will be given. It’ll help you keep your dependencies in sync and up-to-date, plus allowing for third parties to develop update scripts called “schematics” that will auto-update your code when that third party needs to make some breaking changes. For ng add, you’ll see that it uses your package manager of choice to download and install new dependencies that can update a project with polyfills, configuration changes, or scaffold package-specific initialization code.
• The introduction of Angular Elements to convert custom elements into web components that can be reused.
• The new tree component for displaying hierarchal data.
• CLI workspaces that can contain multiple projects, like libraries and applications.
• The addition of ng generate library to support the creation and building of libraries in the CLI.
• Dependency Injection to bundle services into modules, so that applications are smaller.
• The promise of long term support for all major releases starting with v4.

So, with these new features, our Angular team is looking forward to further optimizing Ignite UI for Angular, boosting the 50+ Material-based components and the fastest Angular Data Grid for peak performance.

Let’s look at the team’s most talked about features and expand on some of the details.

Architecture Overview

Angular Elements:

When talking with the team about Elements, it was met with much excitement as to where Elements could take developers as Angular grows. Radoslav aptly noted that, “…reusability is there but, more importantly, interchangeability is king.”

Elements offer reusability and interchangeability by allowing developers to quickly publish their Angular components as framework-agnostic web components, without worrying about bootstrapping and modules. Using the Elements package, it allows for a developer to take the created component and register this now custom Element with the browser using the custom Elements API. The resulting Element can now be placed anywhere on a browser page without being connected to the DOM element, since its already been done using the browser APIs. With it now functioning as a standard DOM element, it can be adjusted with attributes and properties, now allowing a developer already familiar with HTML and JavaScript to conduct business as usual. By bridging the gap between Angular components and DOM elements, these custom Angular Elements can be injected, reflected, and synced with the DOM, allowing for true cross-platforming, reuse, content-rich applications, and dynamically created content.

As this feature grows, we're essentially hitting upon reusability with the true crux being interchangeability. Developers would be able to take their source code and controls, put them through a compiler, and have independent web components ready for use across a variety of ecosystems. With Angular currently receiving support from major browsers like Chrome, Firefox, Opera, and Safari, with Edge still on the cusp, web components and their interchangeability will boost Angular into an even larger spotlight as support builds.

The team is looking towards the upcoming framework independency, as a reduced code size in combination with interchangeable web components will greatly enhance the speed of products built with Ignite UI for Angular.

The Practicality of Building a Native Angular Application:

When Konstantin and Radoslav took time to look over the hierarchal changes, overall streamlining, and the use of tree-shaking, both had a few ideas about the popularity of Angular in the future. Konstantin put forth that,

There’s a big push by Angular for application optimizations that are done by the framework and other supporting frameworks, rather than leaving this to the developer. This gives Angular a big advantage when choosing a framework for adoption, because as a developer, you may or may not be aware of how to optimize your application, and the framework doing that for you saves a lot of time and effort. Bottom line – just like Ignite UI for Angular – it makes you more productive.

As it’s grown, the Angular framework for JavaScript has risen in popularity due to a variety of reasons: its hierarchal structure and modular building; its use of TypeScript; its component and class-based system for easy maintenance; its speed with server-side rendering; its cross-platform capabilities; and its quick-building with simple, declarative templates.

The popularity is also due in part to the practicality of using Angular. The native Angular application affords companies the ability to pull away from using the "lowest common denominator", as oftentimes the easiest of options is chosen when developing for cross-platform capabilities. Frequently, a product will be built in JavaScript and various APIs will be imposed on top to have that product be able to "talk" to relevant programs. This ends up scaling down the overall reusability of an application, which is now being mitigated with Elements.

Furthermore, this practicality is emphasized best by Radoslav, as he illustrated a bit of the reasoning for the team’s transition to building productivity tools in for Angular. He stated, “Angular has a good set of stable features since v4, good tooling for developing and building projects, and enough of a community to continue improving it. In the end, developers and users should decide what actually helps them solve their problems and not which npm package is more popular.”

Virtualization and the Upcoming Renderer:

When I asked Radoslav about Angular and the team’s work with code minification, virtualization, and the implementation of the new “Ivy” renderer with the v7 release, he laughed, saying, “The ‘Ivy’ renderer is the next best thing since sliced bread.”

Our Angular team uses each Angular release to push for high optimization with the virtualization directive to ensure that large-scale data sets will smoothly render with Ignite UI for Angular’s fast data grid. Infragistics recognized that as Angular develops, it's only going to become faster in server-side rendering due to code splitting with features like the new Component Router and the size of the rendering engine itself. Currently, Angular's rendering engine has become smaller and smaller, allowing developers to ship in microcode. With the early testing of the newest rendering engine for Angular 7, code-named "Ivy," developers would be able to ship a basic "Hello World" application in just under 3 kilobytes with the minified version currently standing at just over 7 kilobytes. Paired with Ignite UI for Angular’s updated virtualization directive, we're continually able to provide the fastest Angular data grid on the market today.

As for the Infragistics team, they went and implemented igxForOf in Ignite UI for Angular, which is functioning as an alternative to Angular's ngForOf for templating sizeable amounts of data. As pulled from our documentation, "The igxForOf uses virtualization behind the scenes to optimize DOM rendering and memory consumption. It's working similarly to Paging by slicing the data into smaller chucks which are swapped from a container viewport while a user scrolls the data horizontally and vertically."

They designed this as a way to help developers who are using the Angular data grid for enterprise or commercial applications, as there are two major problems that tend to go hand-in-hand with products that lack strong virtualization for their data grids:

• A noticeable lag in column headers that results in the column names being unable to stay attached to the appropriate column while horizontally scrolling
• A whited-out screen between scrolls as the data is taking time to render

While seemingly insignificant on paper, a product that is able to handle and to render large-scale data sets has become a significant want amongst the enterprise and commercial communities, particularly for those who need this data to be readily available at a moment's notice.

With eyes on Angular to continually release a smaller, faster renderer, the team is continually using these updates to ensure that our Angular Data Grid is able to handle robust data sets without a hitch or lag.

Grid and Component Highlights

Given the strong foundation and implementation of Ignite UI for Angular, let's move through a few of the most talked about features of our data grid and components:

Data Grid

Our Data Grid allows for you to display and manipulate tabular data with Ignite UI for Angular, and you can quickly bind your data with very little coding or configuration. Some must-have features include filtering, sorting, paging, templates, movable columns, and the ability to edit and update data. Also, user actions are easy to understand and can be controlled programmatically.

The grid is exported as an NgModule, thus all you need to do in your application is to import the IgxGridModule inside your AppModule, as shown below:

Once you’ve imported the igxGridModule, you can begin to data bind your information and import various components, directives, and higher classes. You can read about the full process in our documentation, check out the demo on StackBlitz, and here are some notable components from the 18.1 release with which you’ll find yourself working:

• Column Pinning
• Column Resizing
• Export to Excel/CSV/TSV
• Summaries
• Row Selection
• Editors
• Mask Directive
• Input Group
• Toggle
• Theming
• Time Picker

Financial Chart

Importantly, with the igxFinancialChart component, developers are able to construct high-performance, lightweight, and easily configurable charts to display financial data. You can take a look at the component on StackBlitz, and you'll see that, after you bind the data source, you're able to fully customize the financial chart to a preferred visualization. This can provide a user context and clarity to the information through a variety of chartType properties like bar, candle, column, line, and auto.

Below you can see an example of simple data source and the following code to bind a financial chart to that data source:

After customization binding, the financial chart is exported as an NgModule. You'll notice that you'll need to import the igxFinancialChartModule inside of your AppModule:

As a significant feature, you're able to bind high-volume data to your financial chart. Due to Angular specific features, you'll want to make sure to set changeDetection: ChangeDetectionStrategy.OnPush in your @Component decorator. By setting this, you're telling Angular to avoid digging deeply into the changes within your data array, as you wouldn't want that occurring during every changeDetection cycle.

While the above example demonstrated a simple data source, here's a look at binding to high volumes of data:

Category Chart

Our igxCategoryChart component is one that simplifies the complexities of the data visualization domain into a simple API. You're able to bind a collection of data or a collection of collection, and the category chart will automatically select the best series for the data's representation. This component example is also available on StackBlitz, and you'll see that it affords chartType properties like line, area, column, point, and spline.

Similarly to igxFinanicalChart, in order to create the igx-category-chart component, you must bind the data. Below you can see an example of simple data source and the following code to bind a category chart to that data source:

And remember, with the auto option for the chart type, the chart will analyze the assigned data based on suggestions from the Data Adapter.

Looking Forward to Angular 7

The Angular 7 release is slated to arrive sometime in mid to late Fall. We can expect to see more support for Elements and the transition into independent web components, and we'll get the opportunity to work with the new renderer and take advantage of the code minification. Since there's such a large push by Angular to optimize applications, the use of the framework only seems to be growing. It's proving to be particularly useful for developers who aren't sure of how to necessarily optimize an application, and Angular is showing how it can save you time and effort when building. Similarly, the approach harkens to our work with Ignite UI for Angular, in that we're working to boost the use of efficient tooling and productivity.

The Infragistics team has developed a roadmap based off of Angular’s progress, and they’ll be looking to add a series of new components and directives that will enhance Ignite UI for Angular’s library. They’ll also be including a new webpack for Ignite UI CLI and adding more features related to general scaffolding with templates and views for major components. Moving forward, they’re taking advantage of the new schematic feature for Angular and creating one so that ng-update works for Infragistics’ new features.

As I've discussed a few of the reasons why we’ve stepped into the Angular world and some of the latest Angular developments, I'll note again that our team is working closely with Google’s in order to ensure that we develop the best and fastest Angular products for developers working with web and mobile application development. We’re excited to continually bring you features that boast best-in-class grids, charts, and components, so you’re encouraged to take time to look over our entire Infragistics Ultimate 18.1 suite. Plus, you can follow us on Twitter for the latest updates on work that we’re doing.

C# Corner heralds as one of the largest online social communities for IT developers and professionals to share their experiences, articles, and questions. Founded in 2000 by Mahesh Chand, the forums, blogs, videos, and comprehensive interactive materials allow for developers, from the fresh-faced neophyte to the well-seasoned programmer, to forge a community built on an extensive and fruitful learning environment.  

Recently, we've formed a strategic marketing agreement with C# Corner due to the respective leadership we each have in our fields. We'll both be working together to promote, on social media and on our website, the latest information C# Corner has to offer about developer topics specific to the Infragistics community members, such as Angular. WPF, and .NET. In return, C# Corner will continue to post articles about Infragistics' flagship products and highlight core development features.  

With around 57,500 total article views in the recent line-up, here's a breakdown of what's been posted by C# Corner: 

"Build Navigation in Angular App" 

What’s it about? "Learn the following: Install Ignite UI for Angular; Create Angular Project with Ignite UI; Introduction to Navigation Drawer..." 

"Add Validation to a Web Form Using IGValidator" 

What's it about? "IGValidator that can be used to validate a form’s input controls without writing too much code... [and how] this control provides a very high interactive design for success and failure of data validation...because it’s written in JavaScript, that makes it very efficient and easy to code." 

"Create Charts in ASP.NET MVC Using Ignite UI jQuery" 

What's it about? "How to build a complete data-presentable MVC web application using Visual Studio 2017, C#, and Ignite UI JavaScript chart controls." 

"Building a Data Driven App Using WPF XamDataGrid" 

What's it about? "How to build a complete data-driven WPF app using Visual Studio 2017, C#, and Infragistics DataGrid control, XamDataGrid." 

"Building Windows Forms Data Driven App Using UltraGrid" 

What's it about? "How to build a complete data-driven Windows Forms app using Visual Studio 2017, C#, and UltraGrid control." 

"Data Binding and CRUD Operations in ASP.NET WebDataGrid" 

What's it about? "Learn the following: Introduction to data binding in a WebDataGrid; Implemention of paging, filter, and sorting functionality; Auto CRUD database operations; Export records to Excel..." 

"Play Video in Angular Using Ignite UI Video Player"  

What's it about? How "The Ignite UI Video Player is an HTML 5 Video Player which renders video on a web page with a robust, cross-browser user interface." 

Moving forward, be sure to keep up on the news from both C# Corner and Infragistics. You can do so by following both C# Corner and Infragistics via their respective Twitter handles. If you're looking to try out any of the products mentioned in the articles, be sure to check out Ignite UI for Angular, Ignite UI for JavaScript, or our full developer kit with Ultimate 18.1. 

To understand ViewEncapsulation in Angular, first we should understand about Shadow DOM.  You can learn in detail about Shadow DOM here. Putting it in simple words, Shadow DOM brings Encapsulation in HTML Elements. Using the Shadow DOM , markup, styles, and behaviors are scoped to the element and do not clash with other nodes of the DOM. Shadow DOM is part of Web Components, which encapsulates styles and login of element.

Angular Components are made up of three things:

1. Component class
2. Template
3. Style

Combination of these three makes an Angular component reusable across application. Theoretically, when you create a component, in some way you create a web component (Theoretically, Angular Components are not web components) to take advantage of Shadow DOM. You can also use Angular with browsers, which does not support Shadow DOM because Angular has its own emulation and it can emulate Shadow DOM.

To emulate Shadow DOM and encapsulate styles, Angular provides there types of ViewEncapsulation. They are as follows:

Let us try to understand it using an example. I have created a component, as shown below:

app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    title = 'parent component';
}

app.component.html

<div>    <h1>        Welcome to {{ title }}!
    </h1></div><app-child></app-child>

app.component.css

h1 {
        background: red;
        color: white;
        text-transform: uppercase;
        text-align: center;
    }

We are setting the style of h1 in the component CSS. We have also created another component:

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-child',
    template: `
  <h1>{{title}}</h1>
  `
})
export class AppChildComponent {
    title = 'child app';
}

In AppChildComponent, we are also using h1 tag. To understand different ViewEncapsulation options, we will change the metadata of AppComponent.

Let us start with ViewEncapsulation.None, in this option,

1. There is no shadow DOM
2. Style is not scoped to component

As you run the application, you will find h1 style has applied to both components, even though we set style only in AppComponent. It happened because in AppComponent we have set encapsulation property to ViewEncapsulation.None.

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    title = 'parent component';
}
 

In the browser when you examine source code, you will find h1 style has been declared in the head section of the DOM.

Therefore, in ViewEncapsulation.None, style gets move to the DOM head section and is not scoped to the component.  There is no Shadow DOM for the component and component style can affect all nodes of the DOM.

Next, let us explore ViewEncapsulation.Native, in this option:

1. Angular will create Shadow DOM for the component.
2. Style is scoped to component

As you run the application, you will find h1 style has applied to both components, even though we set style only in AppComponent. It happened because in AppComponent we have set encapsulation property to ViewEncapsulation.Native, and we are using AppChildComponnet as child inside template of AppComponent.

import { Component, ViewEncapsulation } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.Native
})
export class AppComponent {
    title = 'parent component';
}

In the browser when you examine source code, you will Shadow DOM has created for the AppComponent and style is scoped to that.

Therefore, in ViewEncapsulation.Native Angular creates a Shadow DOM and style is scoped to that Shadow DOM.

Next, let us explore ViewEncapsulation.Emulated, in this option:

1. Angular will not create Shadow DOM for the component.
2. Style will be scoped to the component.
3. This is default value for encapsulation.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
    title = 'parent component';
}

 As you run the application, you will find that h1 style from AppComponent is not applied to h1 of AppChildComponent. It is due to emulated scoping. In this style is scoped only to the component. In this option, Angular only emulates to Shadow DOM and does not create a real shadow DOM. Hence, the application that runs in browsers does not support Shadow DOM also and styles are scoped to the component as well.

Let us see how Angular achieves this? In the browser when you examine source code, you will find answer.

Angular has created style in the head section of the DOM and given an arbitrary id to the component. On basis of ID, selector style is scoped to the component.

 These are three ViewEncapsulation options are available in Angular.   I hope you find this post useful. Thanks for reading.  If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 50+ Material-based Angular components to help you code web apps faster.

You may have come across the requirement to push data in real time to an Angular Grid. To push data to the browser, you need a technology called WebSocket. You can implement that using NodeJS or ASP.NET SignalR. For the purpose of this article, we will use Web Sockets with NodeJS. 

In the first half of this article, we will create an API which will use Web Sockets to push data to the client, and, in second half of the article, we will create an Angular application to consume that. In the Angular application, we will use Ignite UI for Angular Grid.  However, you can also use a simple HTML table to consume data in real time from web socket. In this article, we will learn to consume data in real time from NodeJS Web Socket in a HTML table as well as Ignite UI Angular Data Grid. We will witness difference in performance in these two approaches.

You can learn more about Ignite UI for Angular: here

NodeJS API

Let us start with creating NodeJS API. Create a blank folder and add a file called package.json. In package.json, add dependencies of

• Core-js
• Express
• io

 More or less your package.json file should look like below:

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "nodejs web socket demo",
  "main": "server.js",
  "dependencies": {
    "core-js": "^2.4.1",
    "express": "^4.16.2",
    "socket.io": "^2.0.4"  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"  },
  "author": "Dhananjay Kumar",
  "license": "ISC"
}

You can pull data from any type of database such as relational data base, No SQL database, etc. However, for purpose of this post, I am going to keep it simple and have hardcoded data in the data.js file. This file will export a JSON array, which we will push using web socket and timer.

Add a file in folder called data.js and add the following code in it.

data.js

module.exports = {
    data: TradeBlotterCDS()
};
 
function TradeBlotterCDS() {
    return [
        {
            "TradeId": "1",
            "TradeDate": "11/02/2016",
            "BuySell": "Sell",
            "Notional": "50000000",
            "Coupon": "500",
            "Currency": "EUR",
            "ReferenceEntity": "Linde Aktiengesellschaft",
            "Ticker": "LINDE",
            "ShortName": "Linde AG",
            "Counterparty": "MUFJ",
            "MaturityDate": "20/03/2023",
            "EffectiveDate": "12/02/2016",
            "Tenor": "7",
            "RedEntityCode": "DI537C",
            "EntityCusip": "D50348",
            "EntityType": "Corp",
            "Jurisdiction": "Germany",
            "Sector": "Basic Materials",
            "Trader": "Yael Rich",
            "Status": "Pending"        }
        // ... other rows of data 
    ]
}

You can find data with 1200 rows here.

 From data.js file, we are returning TradeBlotter data. Now in your project folder, you should have two files: package.json and data.js

At this point in time, run the command, npm install, to install all dependencies mentioned in package.json file. After running command, you will have the node_modules folder in your project folder.  Also, add server.js file in the project.  After all these steps, your project structure should have following files and folders.

• js
• js
• Node_modules folder

 In server.js, we will start with first importing required modules,

const express = require('express'),
    app = express(),
    server = require('http').createServer(app);
io = require('socket.io')(server);
let timerId = null,
    sockets = new Set();
var tradedata = require('./data');

Once required modules are imported, add route-using express as below:

app.use(express.static(__dirname + '/dist'));

On connecting the socket, we are performing following tasks:

1. Fetching data
2. Starting timer(We will talk about this function later in the post)
3. On disconnect event deleting the socket

io.on('connection', socket => {
 
    console.log(`Socket ${socket.id} added`);
    localdata = tradedata.data;
    sockets.add(socket);
    if (!timerId) {
        startTimer();
    }
    socket.on('clientdata', data => {
        console.log(data);
    });
    socket.on('disconnect', () => {
        console.log(`Deleting socket: ${socket.id}`);
        sockets.delete(socket);
        console.log(`Remaining sockets: ${sockets.size}`);
    });
 
});

Next we have to implement, startTimer() function. In this function, we are using JavaScript setInterval() function and emitting data in each 10 millisecond time frame.

function startTimer() {
    timerId = setInterval(() => {
        if (!sockets.size) {
            clearInterval(timerId);
            timerId = null;
            console.log(`Timer stopped`);
        }
        updateData();
        for (const s of sockets) {
            s.emit('data', { data: localdata });
        }
 
    }, 10);
}

We are calling a function updateData() which will update data. In this function, we are looping through local data and updating two properties, Coupon and Notional, with random number between ranges.

function updateData() {
    localdata.forEach(
        (a) => {
            a.Coupon = getRandomInt(10, 500);
            a.Notional = getRandomInt(1000000, 7000000);
        });
}

We have implemented getRandomInit function as shown below:

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}

By putting everything together, sever.js should have following code

Server.js

const express = require('express'),
    app = express(),
    server = require('http').createServer(app);
io = require('socket.io')(server);
let timerId = null,
    sockets = new Set();
var tradedata = require('./data');
 
var localdata;
 
app.use(express.static(__dirname + '/dist'));
 
io.on('connection', socket => {
 
    console.log(`Socket ${socket.id} added`);
    localdata = tradedata.data;
    sockets.add(socket);
    if (!timerId) {
        startTimer();
    }
    socket.on('clientdata', data => {
        console.log(data);
    });
    socket.on('disconnect', () => {
        console.log(`Deleting socket: ${socket.id}`);
        sockets.delete(socket);
        console.log(`Remaining sockets: ${sockets.size}`);
    });
 
});
 
function startTimer() {
    timerId = setInterval(() => {
        if (!sockets.size) {
            clearInterval(timerId);
            timerId = null;
            console.log(`Timer stopped`);
        }
        updateData();
        for (const s of sockets) {
            s.emit('data', { data: localdata });
        }
 
    }, 10);
}
 
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}
 
function updateData() {
    localdata.forEach(
        (a) => {
            a.Coupon = getRandomInt(10, 500);
            a.Notional = getRandomInt(1000000, 7000000);
        });
}
 
server.listen(8080);
console.log('Visit http://localhost:8080 in your browser');

We have created Web Sockets in NodeJS, which is returning data chunk each 10 milliseconds.

Creating Angular Application

In this step, let us create Angular application. We are going to use Angular CLI to create an application and then add Ignite UI for Angular Grid. Follow the below article to create an Angular application and add Ignite UI for Angular Grid in the application.

https://www.infragistics.com/community/blogs/b/infragistics/posts/four-simple-steps-to-working-with-ignite-ui-for-angular-grid-and-rest-service

 If you are following above article, you need  changes in step three in which we are creating Angular service to consume API.

Let us start with installing socket.io-client in Angular project. To do that run npm install,

npm i socket.io-client

 We will write an Angular service to create the connection with NodeJS Web Socket. In app.service.ts, let us start with importing.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { map, catchError } from 'rxjs/operators';
import * as socketIo from 'socket.io-client';
import { Socket } from './interfaces';

We have imported required modules. Later we will see how socket type is defined inside interface.ts file.  Next, let us create make connection to Web Socket and fetch next data from the response. Before returning the next data chunk from the web socket, we are converting that to an Observable.

getQuotes(): Observable < any > {
    this.socket = socketIo('http://localhost:8080');
    this.socket.on('data', (res) => {
        this.observer.next(res.data);
    });
    return this.createObservable();
}
 
createObservable(): Observable < any > {
    return new Observable<any>(observer => {
        this.observer = observer;
    });
}

The above two functions, will make connection to web socket, fetch data chunk, and convert that to observable. Putting everything together, app.service.ts will look like the below:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { map, catchError } from 'rxjs/operators';
import * as socketIo from 'socket.io-client';
import { Socket } from './interfaces';
 
@Injectable()
export class AppService {
 
    socket: Socket;
    observer: Observer<any>;
 
    getQuotes(): Observable<any> {
        this.socket = socketIo('http://localhost:8080');
        this.socket.on('data', (res) => {
            this.observer.next(res.data);
        });
        return this.createObservable();
    }
 
    createObservable(): Observable<any> {
        return new Observable<any>(observer => {
            this.observer = observer;
        });
    }
 
    private handleError(error) {
        console.error('server error:', error);
        if (error.error instanceof Error) {
            let errMessage = error.error.message;
            return Observable.throw(errMessage);
        }
        return Observable.throw(error || 'Socket.io server error');
    }
 
}

In the service, we are using a type called Socket. We created this type in file interfaces.ts as below:

export interface Socket {
    on(event: string, callback: (data: any) => void);
    emit(event: string, data: any);
}

Now Angular service is ready which will make connection to NodeJS Web socket and fetch data from the API as observable.

This is normal Angular service and can be consumed in a component in the usual way. Start with importin that in the module and then injecting that in component constructor as shown below:

constructor(private dataService: AppService) { }

we can call service method to fetch data in OnInit life cycle,

ngOnInit() {
    this.sub = this.dataService.getQuotes()
        .subscribe(quote => {
            this.stockQuote = quote;
            console.log(this.stockQuote);
        });
}

Putting everything together, component class will look like the below.   

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AppService } from './app.service';
import { Subscription } from 'rxjs/Subscription';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
 
    stockQuote: number;
    sub: Subscription;
    columns: number;
    rows: number;
    selectedTicker: string;
 
    constructor(private dataService: AppService) { }
 
    ngOnInit() {
        this.sub = this.dataService.getQuotes()
            .subscribe(quote => {
                this.stockQuote = quote;
                console.log(this.stockQuote);
            });
    }
    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

One important thing you may want to notice is that we are unsubscribing the observable returned in OnDestroy life cycle hook of the component.  On the template, simply render data in table as below:

<table>    <tr *ngFor="let f of stockQuote">        <td>{{f.TradeId}}</td>        <td>{{f.TradeDate}}</td>        <td>{{f.BuySell}}</td>        <td>{{f.Notional}}</td>        <td>{{f.Coupon}}</td>        <td>{{f.Currency}}</td>        <td>{{f.ReferenceEntity}}</td>        <td>{{f.Ticker}}</td>        <td>{{f.ShortName}}</td>    </tr></table>

Since we are rendering data in real time in a normal HTML table, you may experience flickering and some performance issue. Let us replace HTML table with Ignite UI for Angular grid.

Learn more about Ignite UI for Angular Grid here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html  and you can learn to work with Ignite UI for Grid and REST Service in four simple steps here

You can add Ignite UI Grid in Angular application as shown below. We have set data source of the igxGrid using data property binding and then manually adding columns to the grid.

<igx-grid [width]="'1172px'" #grid1 id="grid1" [rowHeight]="30" [data]="stockQuote"          [height]="'600px'" [autoGenerate]="false">    <igx-column [pinned]="true" [sortable]="true" width="50px" field="TradeId" header="Trade Id" [dataType]="'number'"> </igx-column>    <igx-column [sortable]="true" width="120px" field="TradeDate" header="Trade Date" dataType="string"></igx-column>    <igx-column width="70px" field="BuySell" header="Buy Sell" dataType="string"></igx-column>    <igx-column [sortable]="true" [dataType]="'number'" width="110px" field="Notional" header="Notional">    </igx-column>    <igx-column width="120px" [sortable]="true" field="Coupon" header="Coupon" dataType="number"></igx-column>    <igx-column [sortable]="true" width="100px" field="Price" header="Price" dataType="number">    </igx-column>    <igx-column width="100px" field="Currency" header="Currency" dataType="string"></igx-column>    <igx-column width="350px" field="ReferenceEntity" header="Reference Entity" dataType="string"></igx-column>    <igx-column [sortable]="true" [pinned]="true" width="130px" field="Ticker" header="Ticker" dataType="string"></igx-column>    <igx-column width="350px" field="ShortName" header="Short Name" dataType="string"></igx-column></igx-grid>

Few points you should focus on in the grid we created:

1. By setting height property, you can enable virtualization on the Ignite UI for Angular grid.
2. By setting sortable property, you can enable sorting on the particular column.
3. By setting pinned property, you can pin a column to the left of the grid.
4. By setting data property, you can set data source of the grid.
5. You can add columns manually by using <igx-column/>.
6. Field and header of <igx-column/> is used to set field property and header of the column.

Now when you run the application, you will find grid is updating in real time with data and also not flickering. You will find grid is updating every 10 milliseconds.

In this way, you can push data in real time using NodeJS Web Socket API in Angular application. I hope you find this article useful. If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 50+ Material-based Angular components to help you code web apps faster.

When working with data sets, it’s important to make sure that your data is being properly and efficiently presented to your audience while following best practices for data visualizations. There are many different features and tricks you can use on your visualizations to make sure it’s understandable, succinct, and informative. Here are some quick formatting choices and additions that will improve overall readability and meaning behind your graphs and charts.

1) Conditional Formatting

Conditional formatting gives you quick indicators for the skew of your data based on the given bounds that you have previously assigned to it. For example, if having a quota over 65% is proficient, between 65% and 55% is fair, and below 55% is poor, then you can quickly see with conditional formatting who is meeting the expected quota and who is not.

2) Add Trendlines

You can show data trend or moving averages in your charts by adding a trendline. Trendlines are a very simple, yet powerful tool to help you determine trends in data sets and define thresholds for taking action. There are a number of trendlines out there that you can use on your visualizations depending on your data.

3) Filter by Rule

Filtering by rule allows you to either add a quick filter option to your axes or your data. Seeing sales by day may be an important aspect to a lot of managers and executives in companies, but, when you pull in every single day like you see below, it is hard to make sense of the data. By filtering this down to the last 30 or even 7 days you can more clearly see the days of low and high sales.

You can also do this with your data points as well. For example you may be in a company with a long list of sales representatives. Trying to create a visualization that shows you how each on is performing may not be effective. Instead looking at the top 10 or 20 sales representative, filtering by rule will allow you to gauge who is always performing well (or vice versa for bottom 10 or 20).

4) Add a Hierarchy

Adding hierarchy to your visualization will allow you to view data from a high level and drill down into specifics as you begin to ask questions. By adding a hierarchy to the data below, you are able to show both the total sales of each sales rep and then break that down even further by product. This eliminates the need to create extra visualizations and extra work!

You can also use this feature in a chart just as a bar chart that will allow you to drill down into a sales reps by product sales by simply clicking on their corresponding bar.

5) Sort Your Data

When your data isn’t based on date-oriented viewing, sorting the data either in descending or ascending order will visually display what story you are trying to tell. The example below shows your how you can quickly tell that “Complete” is the bestselling product and “Enterprise” is the worst performing in sales.

6) Format Your Data

Formatting your data can be a quick, simple way to make the numbers more visually appealing and easier to read to an end user. For either gauges or charts such as bar charts and column charts, you can adjust your data formatting to show a certain number of decimals, comma separators, displays as numbers, currency, percentage, or large number formatting.

7) Include a Comparison

You can both improve and add more insights to your visualizations by including comparisons to your charts. You can display your data based on date, like year over year, or you can use a comparison chart to compare two data points such as budget vs actual.

8) Chart Title

Keep your chart title simple and to the point since your data and visualization should tell the story. Primarily, your title should directly relate and support the chart underneath of it. 

Following a few or all of these best practices for data visualizations will begin to help you better present your important data. In turn, remember that half the battle is having a tool at your fingertips that enables you to make these edits and choices. Be sure to take a look at ReportPlus, a way to bring true self-service BI to any business.

In this blog post, we will learn systematically about how Ignite UI CLI can be updated to the latest version.

Learn more about Ignite UI CLI here

To know the current version installed on your machine run the command,

ig –v

This should give you current version as shown below:

The current version of Ignite UI CLI on my system is 1.3.0.  Now, I’ll want to update my version to create a new Angular app.

For this, we’ll update Ignite UI CLI to the latest version using the command,

npm i -g igniteui-cli

After successfully updating Ignite UI CLI, run the first command again to check the version installed.

ig- v

This should give you updated current version as shown below:

Now, on your system, you should have updated version 1.3.1 of Ignite UI CLI.  We can go aheadand create a new Angular project with latest version of Ignite UI CLI.

Let’s create a new Angular project using

ig new demo3  --framework=angular

In package.json, you can check that new project has been created using latest version of Ignite UI for Angular,

Then add an Ignite UI for Angular Grid to the application using following command,

ig add grid mygrid

Then run application using

ig start

This command will install all required modules and run the application. You will have application running as shown below:

This is all you need to do to update to latest version of Ignite UI CLI. I hope you find this post useful. Thanks for reading.

Today, organizations are no longer asking themselves, ‘Do I need a mobile app?’ With more people than ever accessing information from their favorite clothing stores, booksellers, furniture retailers and more, there is no question that organizations need apps that can deliver a responsive, appealing user experience on devices.

The question, though, has shifted to ‘Do I need a mobile app or a browser app?’ Native apps require unique skill sets for writing to discreet platforms, and those apps have to be written over and over to run on each platform. Browser apps can work well on mobile devices but don’t allow developers to take advantages of the device’s features.

This month’s cover story in SD Times looks at the pros and cons of hybrid apps. In the piece, news editor Christina Cardoza writes:

“According to the Ionic Developer Survey 2017, hybrid app development is taking over. The report revealed that 32.7 percent of responding developers plan to abandon native app development in favor of hybrid. In addition, the survey found a nearly 700 percent decrease in developers building exclusively with native tools.

“A hybrid app is essentially a native app, Ionic’s CEO Max Lynch explained. Hybrid apps are downloaded from an app store similarly to native, and can access native feature such the GPS, camera, contacts, accelerometer and sensors. The difference is that native require proprietary or platform-specific languages such as Swift, Objective-C and Java, while hybrids utilize web technologies — JavaScript, HTML and CSS. By using a webview wrapper, such as Electron or Apache Cordova, which enables the app to call into the device’s native features, web developers can use their existing skill set, whereas in a native approach they would have to learn a new set of skills.”

Angular bridges gap between developers, designers

Quite often in application development, the code and business logic are written in one place, and the design is created in another. This disconnect had led to some pretty unusual applications that have CTA buttons in unexpected places, copy that’s too narrow or wide, art that overwhelms or that you need a magnifying glass to really understand.

The Angular team is looking to address that problem with Angular for Designers, introduced last month at the ng-conf in Salt Lake City, Utah.

As SD Times reported:

“Apps that users love to use, developers love to build,” said Stephen Fluin, developer advocate for Angular. “But we have been leaving out designers and I think they are a critical part of building experiences that users love to use.”

Fluin defines designers as “individuals who focus more on the user interface and user experience.” The reason why the team is taking a broad definition to designers is because a lot of designers define themselves in different ways, use different tools and have a variety of different skills, so the team did not want to leave anyone out.”

Angular looks to deliver solutions that don’t require designers to learn development tools, but focus on the designers’ job: ergonomic file formats, ability to create a single HTML file, adding new commands, and more.

Node.js announces first release in 10.x line

The release, which will offer Long Term Support, upgrades to OpenSSL 1.1.0, leveraging work to improve code quality cleanup and modernization, reports SD Times online and social media editor Jenna Sargent. In the article, Sargent writes:

“Node.js 10.0.0 is the seventh major release of the project since the launch of the Node.js Foundation in 2015,” said James Snell, Node.js release manager for 10.0.0. “This release continues the project’s commitment to delivering improved stability, performance, and reliability for all Node.js users. While there are a handful of new features, the standout changes in 10.0.0 are improvements to error handling and diagnostics that will improve the overall developer experience.”

When determining the right mobile solution for your business, there are several considerations to make, including to ensure end user adoption and deployment success.In our last blog, we gave a brief overview of the major items to consider when moving towards a new mobile solution. This blog utilizes direct comparisons between Microsoft's SharePoint mobile app and Infragistics SharePlus to highlight the how a simple and customizable UX can reduce app abandonment.  

Simplicity: The One App vs. Two Apps User Experience 

SharePoint for iOS App Review: “I had high expectations for the app until I had a hard time getting to what I wanted. Keep getting annoying prompts for OneDrive to handle files.  Not deploying this company wide until a myriad of items get fixed." 

Microsoft has taken a multiple app approach to mobile file access. To access any files offline and online files located in other locations beyond favorites or recents, the user is pushed from SharePoint to OneDrive.  This requires the user to download, manage and navigate between two apps.  For the user, this creates a dissonant experience, with two incongruous looks and feels. This two-application experience leads to frustration and to low adoption rates for teams, as most users expect a fully integrated, one-stop solution.  

The SharePlus solution has been designed with simplicity in mind, providing one place and one simple and easy experience for mobile users to quickly find and access the files they need.  The SharePlus environment is fully integrated with SharePoint with no back and forth switch back between applications, allowing a user to find their relevant data with a few clicks with no worry about how the data might be displayed. 

Customizable: Mobile Workspaces 

SharePlus has also taken the concept of simplifying navigation to the next level with additional functionality that enables organizations to fully configure custom mobile workspaces and provide end users with curated content experiences. These mobile workspaces can be specifically tailored to meet mobile team needs providing one tap access to content. They are deployed using templates with no coding required to ensure deployment is also simple and near instantaneous.   

Ultimately, users have a vote too in their day-to-day product usage. If a solution doesn't meet the needs of your workers, success with deployment is going to drop. This is one of the major considerations when moving towards an enterprise-ready solution.  Other considerations, like the transformational power of the application and the use of powerful functionalities, are explored in our other app comparison blogs. If you're interested in experiencing the navigation experience for yourself, try out the SharePlus demo and see what a one-app mobility solution can do.  

One thing about software development: There are so many languages and tools to choose from. From desktop to browser-based and mobile, there’s a flavor for everything you’ll ever need. Yet some in our industry believe there is “JavaScript fatigue” happening. This, in a recent article in SD Times, is defined as the inability to keep up with all the tools and the constant changes in the developer ecosystem. A recent “State of JavaScript” report looks at all that’s changing and the impact of those changes.

JavaScript most widely used language

In the 2018 JetBrains survey, Java remains the most popular primary programming language, but JavaScript is the most used programming language overall.  For mobile, Kotlin might not yet be widely used, the but the survey showed that interest in the programming language is high. You can read the SD Times story here.

Angular for Designers initiative makes progress

At the community ng-conf last month, the Angular team at Google announced it is advancing work on Angular for Designers. As we reported in SD Times, the public launch remains months away, but the team is hard at work on a WYSIWYG prototyping tool that will give designers the ability to create this mockups without writing any code. Stephen Fluin, developer advocate for Angular at Google, lays it all out in this video from the conference.

Vue Vixens

Every Friday on sdtimes.com, we turn the spotlight on open source by selecting a project of the week. Earlier this month, we chose a community program with the mission of introducing women to JavaScript. As SD Times news editor Christina Cardoza reported, other communities for women in programming exist (Django Girls, ng-Girls and more), but Jen Looper, a developer advocate at Progress, saw there was a lack of community around Vue.js, a progressive JavaScript framework for building user interfaces to help scale web applications. Here’s a video describing the effort, including a message from vue.js creator Evan You, founder of Vue Technology.

This article in our Sharelus vs SharePoint comparison series explores the driving force behind a transformational enterprise mobility solution. A mobility solution that harnesses the power of data and capture and sharing are the keys to streamlining your daily operations. Let's compare the transformational capabilities of the two apps.

Transformational: Capturing and Sharing Data On-the-Go 

SharePoint for iOS App Review: “Forget trying to upload event photos straight from your phone, because whenever the app tries to open your camera roll, it just exits out of the sub site you had to use 5 whole minutes to find…It is incredibly frustrating if you want to edit, upload, create a new file or anything else.” 

True competitive advantages are gained by enabling mobile teams to collect and share data while in the field. Construction site managers, for example, can electronically submit project checklists and document jobsite progress along with posted photos. Drivers working for transportation and distribution companies can capture inventory status complete with photos, timestamp, all GPS data from the road, and then instantly send this information back to the office. Field sales reps can also capture customer data to resolve customer issues to make the sale at customer locations. 

The SharePoint mobile app cannot provide this transformational functionality.  It displays only the default view and does not support any of the SharePoint views or meta data that have been created for curating content or capturing data into SharePoint lists. Any investment in view or list creation can’t be leveraged on mobile devices because of this limitation, and it is impossible for mobile users to capture and to share data from the field when offline.   

SharePlus enables mobile teams to use native views to capture data into SharePoint lists and instantly share it with the main office. This onsite data collection and sharing capability is available with or without network connectivity. The SharePlus app also perfectly integrates with the mobile device’s unique features, including the GPS tracker and camera. This allows users to post and to share photos and GPS information along with the collected data to keep their projects moving on time and on budget. SharePlus customized mobile workspaces also provide mobile teams with one tap access to the documents and list items to dramatically simplify mobile user navigation to data entry screens. 

Ideally, your mobile solution is one that also functions as a light data solution. You'll want quick, efficient access to your most important files at the right moments. When strong data share and capture go hand-in-hand with navigational ease and other powerful functionalities, the mobile solution will greatly increase workflow and productivity. If you'd like to experience the data capture, make sure to download the SharePlus demo for yourself and see how powerful it can be. You can also explore how important navigational ease and powerful functionality is to choosing the right mobility app for your teams, as covered in our other articles in our SharePlus vs SharePoint comparison series. 

As my previous entry, Infragistics Team visited South Korea last month partnering with BluePort.
It was the first time for us to visit the country and we had great conversations with developers in Korea.

We hosted Infragistics Dev Day between June 21 and 22 at the BluePort office. We split a day into 2 parts, Angular focused event and WPF focused event. We also had a repeated event in following day.

AM on June 21, 2018 - Angular focused event

We started with Infragistics overview by Jason Beres, Senior VP of Developer Tools:

He talked about overview of Infragistics products and benefits mainly focusing on web controls. He showed grids and various types of charts and demonstrated performance of Ignite UI for Angular and participants were impressed with the speed and real time response. All attendees are developing or planning to develop with JavaScript/HTML5 and/or Angular.

Satoru Yamaguchi, Solution Consultant for Japan and APAC region hosted Ignite UI for Angular Hands On next.

He went through an overview of Ignite UI for Angular, then led a Hands On. Attendees learned how to build a material design based application using Infragistics Ignite UI for Angular components such as grid and chart. Most of the attendees were new to Angular, but they were able to complete the contents.

PM on June 21, AM on June 22, 2018 - WPF focused event

We knew WPF is very popular in South Korea and it's proven that the number of registrants exceeded limit very fast, so we decided to have a second day for the WPF event.

Again, Jason started with Infragistics overview, but focusing on WPF product we have been providing more than 10 years such as grid, charts, productivity tools we're offering.

Satoru hosted another Hands On for Ultimate UI for WPF, too. Like Angular focused event, attendees learned how to build a WPF application using Infragistics grid, chart, pivot, Excel engine, and some other controls. Infragistics WPF configurators were introduced for quicker and easier development. Many of them are Windows Forms users and a half of them have some experience with WPF. All of them were able to complete the contents!

Hands On materials are available on GitHub here, please try it out and let us know what you think.

GitHub - Angular Hands On

GitHub - WPF Hands On

Round table with Korea MVPs!

On the last day, Infragistics Team visited Microsoft Korea Office and had a round table with Korea MVPs. We learned a lot of insights and got improvement ideas. We really appreciate everyone to support our visit and spent time with us!

We will be back to Korea soon and I hope I can visit there next time! Let's keep in touch!