Creating wireframes or mock-ups before coding can make it much easier to collaborate on designs and requirements. By structuring discussions around what the user will see, fewer things are left to interpretation. However, without testing the designs with the target audience, it’s an incomplete UX process.

With Indigo.Design, all you need is a web-browser to go from prototyping to watching videos of how people used your prototype, and the best part is that you can create your designs in any tool you like. Yes, even Microsoft PowerPoint!

Create prototypes in the cloud using Sketch import

To start creating your prototypes, visit Indigo.Design to sign in or create a free user account.

After signing in, use the create new prototype option to fire up the web-based editor. Then simply drag and drop your Sketch document to import it. The best part is that you don’t have to recreate the flows that you may have created in Sketch. Now set a starting point, and hit publish. And that's it! You are all set to kick-off a usability study or share a link with others!

If your Sketch document does not contain any flows, you can add them using this editor. To do this, enable the "Highlight UI elements" option, and then simply click on any highlighted Sketch element to add a hotspot. If you prefer to draw your own hotspots, leave the "highlight UI elements" disabled and drag anywhere on top of the image to add a hotspot.

Don't use Sketch? No problem. You can add images created using any tool and still create and publish prototypes.

Learn more: Create your first prototype

Unlimited usability testing with user video recordings

You can set up a usability study for any prototype published on Indigo.Design. Creating a study lets you collect usability analytics and user videos for each participant.

You do this by setting up tasks for people to complete with the prototype and specifying an expected set of steps. Participants can complete the task however they like, but you will be able to learn whether the “expected path” is the popular one. And when watching video replays, our unique timeline visualization lets you quickly jump to interesting events (e.g., misclicks)

If you add the usability study to a group workspace, you can let any invited member analyze the reports and videos. You can even delegate the usability study responsibility to another member of your team.

Study owners will receive email notifications with a study progress report as and when participants complete the study.

Learn more:

• Create your first usability study
• Viewing results of a usability study

Need more powerful prototyping? Check out Indigo.Design Desktop

The desktop app provides a WYSIWYG experience to create your prototypes from scratch. You can design screens by adding UI components from toolbox or from your own reusable design library.

More importantly, the desktop app allows you to easily create UI states to simulate rich interactivity and custom transitions using an animation timeline. You can even import from Sketch using our Sketch plugin to add more interactivity. And naturally, you can use the desktop app whether you are online or offline!

You can then publish your prototypes to the cloud or your on-prem server to get all the benefits of collaboration, commenting, and usability studies.

Learn more: Indigo.Design Desktop features

Get started with Indigo.Design!

Don't stop with prototypes; get it in the hands of real users with our 1-click sharing, and the ability to view prototypes on any device. Harness the power of Indigo.Design Cloud for recording user sessions and task analytics.

Use our Essential Plan for free or upgrade to Indigo.Design Professional starting at $39/mo. Want Code Generation? Get Indigo.Design Enterprise for $99/month!

• Sign up for free
• View plans & pricing

I wanted to share with you how easy it is to create Angular application with our Ignite UI for Angulartoolset.

What is the purpose of this application? First of all, to demonstrate our Angular components. Second, it’s to demonstrate a real use case, and I wanted to create a system that will track my cryptocurrencies portfolio in order to check my daily gains and losses.  As for the third reason,  to demonstrate the use of different Аngular techniques like utilizing Guards, Pipes, and Custom Templates with our components and, of course, using of Firebase for data storing and authentication.

The topic will cover:

1. The use of Ignite UI Angular CLI
2. Data services, Routing, Templating, Pipes, etc.
3. The use of Firebase Data Storage, Authentication, and CRUD operations
4. Coinmarketcap API to Retrieve real-time and historical price information

Ignite UI CLI

Okay, let's start! So, have you heard about Ignite UI CLI? Yep, this is a real thing that we’ve developed that helps you create Angular applications with a predefined set of components, executing just a few commands. It takes less than three minutes to install all necessary packages and to run the project with the help of our CLI, just follow our official Getting started page.

After the building of the app is completed along with the installation of all necessary packages, you will notice that Navigation drawer and Grid components were added and already configured. The same applies for the different responsive views, routing, styles, module imports, etc. - awesome, right?

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  ...
];

Okay, what's next? We want our app to show variety of things: we want to have user authentication, to track crypto data changes, and to store our Cryptocurrencies portfolio somewhere. For that purpose, Ignite UI for Angular provides all suitable components out of the box. We are going to use Chart for historical data changes and a Grid to show our crypto portfolio and provide the ability to add/update/delete cryptocurrencies, also List and Card.

For all of the above requirements we need to get the data from somewhere, this is where the Coinmarketcap API steps in - This is a free service that provides information for all active cryptocurrencies in one call.

getData() {
    if (!this.cachedData) {
      this.cachedData = this._http.get('https://api.coinmarketcap.com/v2/ticker/?convert=BTC&limit=1000')
      .map(result =>  {
        let newData = [];

        if (result['metadata'].error === null) {
          const fetchedData = Object.keys(result['data']);

          for (const key of fetchedData) {
            newData.push(this.flattenObject(result['data'][key]));
          }
        } else {
          newData = offlineData;
        }

        return newData;
      });
    }
    return this.cachedData;
}

App authentication 

Below I’ve highlighted some steps that I’ve took in order to set up the Firebase authentication of the Crypto App. AngularFireAuth is going to be used for user authentication and all related actions like login and logout. This firebase service provides methods for sign in with email and password, Google authentication provider, and Facebook auth provider. For a more detailed explanation, I recommend checking up the official Angular firebase repository and documentation.

1. Set up a firebaseproject.
2. Go to the Authentication tab and enable Google, Facebook, and Email/password sign-in providers.
3. Based on the methods, generate Facebook ID and later on OAuth redirect URI.
4. Add rules and publish the changes.
5. Add the firebaseConfig to the Angular project.
6. Create Login, Signup and Email components. (code for all)
7. Create auth.service that will handle the redirects of registered and unregistered users (Route guards). As you can see from the code, (add code), the Portfolio page is accessible only for authorized users.

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router, private route: ActivatedRoute) {}

    canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot): Observable<boolean> {
      return Observable.from(this.auth.authState)
        .take(1)
        .map(state => !!state)
        .do(authenticated => {
          if (!authenticated) {
            this.router.navigate([ '/login' ], {
              queryParams: {
                return: routerState.url
              }
            });
          }
      });
    }

}

For more details, have a look at the official firebase authentication getting started topic, and I can guarantee that you won't feel any kind of difficulties when setting it up.

Data storage and CRUD operations 

For data storing and data updates, our application is using Firebase Realtime Database which is a cloud-hosted database, stored as JSON and synchronized in realtime to every connected user. All users share on Realtime Database instance and automatically receive updates with the newest data.

Reading and writing of data is easy, and below are the steps that you could follow in order to achieve CRUD operations:

• Create a separate service for data manipulations
• Define `BlockItem` class that is going to be used for data fetch, adding, updating and removing of records.
• Create a list binding/retrieve that will return an observable of data as a synchronized array of JSON objects. With metadata (underlying DBReference and snapshot key)

For more information check the official firestore documentation.

What about Grid CRUD? Yep, this is possible with the help of Firebase data storage and our great api. Check this file for more information on how to setup your Firebase platform which could provide you abilities for data storage, authentication, etc.

  public deleteRow(item) {
    this.selectedRow = Object.assign({}, this.selectedCell.row);
    this.deleteItem(this.selectedCell.cell.row.rowData);

    // store deleted data
    this.deletedItem.coinName = this.selectedCell.cell.row.rowData.coinName;
    this.deletedItem.holdings = this.selectedCell.cell.row.rowData.holdings;
    this.deletedItem.cryptoId = this.selectedCell.cell.row.rowData.cryptoId;
....
    this.selectedCell = {};
    this.snack.show();
  }

  public updateRow(obj) {
    const updatedItem = obj.row.rowData;
    updatedItem.holdings = obj.newValue;

    this.updateItem(updatedItem);
  }

Full code here.

Configure all components that are going to be used in the application

Fetched data is used from Charts, Grids, Listsand Cardcomponents (provide code for each).

For example, the Card component is using filtering pipes and sorting of data.

export class HomeComponent implements OnInit {
....
  public search1: string;
....
  get filterOptions() {
    const fo = new IgxFilterOptions();
    fo.key = 'name';
    fo.inputValue = this.search1 ? this.search1 : '';
    return fo;
  }
  .....

Check up the code in order to see how each of the components is bound.

Grid

This is the main page that is going to be used for data manipulating and tracking of price changes. We are going to define a grid with five column (count depends on the screen size) and each column will have its own ng template for data representation. This includes images, icons for price movements, and using of decimal pipes.

The action buttons above the grid will handle manual data refresh and adding of new coins. igxDialogis going to be used for that purpose. A minimal validation of the coins is applied. For example, you won't be able to add already existing coins or coins that are not present in the coinmarketcap api. Each notification message is going to be shown via igxSnackBar.

For the coin holding updates, we are going to handle (onEditDone) and from there use the methods that we defined in the BlockItemService. Same applied for the `delete` and `add` coin buttons.

<igx-grid #grid1 [data]="blockItems" width="100%" height="500px" (onEditDone)="updateRow($event)" (onSelection)="selectCell($event)"><igx-column field="coinSymbol" sortable="true" [width]="'25%'"><ng-template igxHeader let-column="column">
			Coin symbol</ng-template><ng-template igxCell let-cell="cell" let-item let-ri="rowIndex" let-column="column"><a class="aStyle" (click)="openChart($event, cell.row.rowData.coinSymbol)"><div class="positionTop"><img src="https://s2.coinmarketcap.com/static/img/coins/32x32/{{ cell.row.rowData.cryptoId }}.png" /><span class="symbolPosition">{{ cell.row.rowData.coinSymbol }}</span></div></a></ng-template></igx-column><igx-column field="holdings" header="Holdings" editable="true" sortable="true" [width]="'25%'"><ng-template igxCell let-cell="cell" let-item let-ri="rowIndex" let-column="column"><div class="positionTop">
				${{ calculateHoldings(cell.row.rowData.holdings, cell.row.rowData.usdPrice) | number:'0.2-2' }}<br /><b>{{ cell.row.rowData.holdings | number:'1.0-5'}}</b></div></ng-template></igx-column><igx-column header="Price" field="usdPrice" sortable="true" [width]="'25%'"><ng-template igxCell let-cell="cell" let-item let-ri="rowIndex" let-column="column"><div class="positionTop">
				${{ cell.row.rowData.usdPrice | number:'0.2-2' }}<br /><span class="percent-style-{{ cell.row.rowData.oneDayPercentChange >= 0 ? 'up' : 'down'}}"> {{ cell.row.rowData.oneDayPercentChange }} % </span></div></ng-template></igx-column><igx-column [width]="'25%'"><ng-template igxHeader let-column="column">
			Actions</ng-template><ng-template igxCell let-item let-ri="rowIndex" let-column="column"><span igxButton="icon" igxRipple (click)='deleteRow(item)' style="margin-top: -9px;"><igx-icon name="highlight_off"></igx-icon></span></ng-template></igx-column></igx-grid>

Chart

This component is going to be used for visual representation of the coin price changes per day. Our igxFinancialChartis easily configurable, as you just pass the fetched data to “dataSource” and, voila, everything else will be handled by the chart. Additionally, the chart respects the general financial data structure.

<igx-financial-chart [dataSource]="data" height="400px" width="100%" style="margin-top: 20px;" isToolbarVisible="false" chartType="candle"></igx-financial-chart>

One interesting item here that should be mentioned is the use of routes to pass data between views. The Statistics page is accessible through a couple of Views which are passing different coin names to be loaded in the chart.

List and Card

IgxListand IgxCardcomponents are used to show a different visual representation of all properties associated with the returned items.

To sum up, everything is possible with the right tooling, and with that said, you definitely should consider using of our Ignite UI for Angular components for your next web/mobile application.

In the next blog of this series, you will learn how to transform the Angular web application that we’ve created into a native android mobile application. We are going to create a JS/HTML Cordova application and deploy it to native mobile app using the cordova command-line interface (CLI).

GitHub repository and hosted application.

How we have defined our atoms, molecules, and organisms*

Unparalleled productivity, absolute consistency, and improved collaboration: design systems have definitely changed our perspective on design. About a year ago, our team stumbled into this new and trendy concept, and it was definitely a love at first sight. As a company that is mostly recognized as a component vendor, we were able in the past years to truly commit to design and embed it deeply into our culture. We saw how our processes and products improved, but it still felt as if design failed to keep its promise. This came from the realization that at Infragistics we may have 1:10 designer-developer ratio, but that was rarely the case throughout the industry. Many of the enterprises we talk to or have been long time customers and partners of ours, live in a different world. Their designer-developer ratio is usually around 1:100, which basically means that design is the bottleneck in the process and sheds light on just a few hand-picked projects from the myriad of software that is being built. With design systems, we saw the opportunity to turn things around and boost design to have for more significant impact on large software organizations.

The Inspiration

One of the cornerstones for design systems is the work of Brad Frost and, more precisely, a book he published in 2016 called Atomic Design. It draws an interesting parallel between chemistry and design systems, looking at interface elements from the perspective of Atoms that when combined build up Molecules that constitute larger Organisms. The Indigo.Design UI Kits for Sketch take this approach by providing three libraries. Styling has sub-atomic pieces such as colors, shadows, typography styles, and icon glyphs that define the looks of the Atoms and Molecules found in the Components library. The concept of a component is familiar to developers, and this is usually a button or a hyperlink that represents an Atom but could also be a more elaborate layout such as a calendar interface or a list with templated items, where multiple Atoms are used to form a Molecule. When mixed with caution and under proper guidance, Atoms and Molecules can turn into a beautiful Organism. And this brings us to the third piece, the Patterns library. It allows people to skip mundane tasks for assembling login forms, user profiles, and detail pages by providing them with a preset collection of UI patterns, inspired from numerous real-world scenarios and guaranteed to meet your practical necessities because of that. Note that the patterns are still in their infancy and feedback or suggestions are very much appreciated!

To make sure your design does not catch fire or explode in your hands, the reactions we absolutely wanted to avoid during chemistry classes in high school, our team has crafted a lot of prescriptive guidance that should let even a developer to craft decent design. Not that we underestimate developers, but their design work has been quite notorious in regard to aesthetics. Indigo.Design was brought to the world to change this and let anyone, designer, developer, product owner or business analyst, be able to confidently create a good and stable piece of design as long as they follow the provided guidance. 

Moving Beyond Sketch Libraries

Having provided the context and foundations for our Indigo.Design UI Kits, the leap in productivity and the improved consistency should be without doubt. But how about collaboration? Indigo.Design is much more than a collection of Sketch libraries, and the rest of the tooling speaks to collaboration. Being able to upload the Sketch project you crafted with the libraries to the Indigo.Design Cloud, define the precise interactions, and run a usability study  is priceless when on a tight schedule and trying to get things right from the first time. But once you are convinced that your design functions and meets all user needs, you can leapfrog the annoying process handing off your designs to a team of developers, simply by generating most of the code assets yourself with our Visual Studio Plugin. As long as you have the data you will be consuming, you can specify your bindings by going back to Sketch and using some of the special override properties we have defined, or work alongside a developer and fill in the gaps so that your assets flow in a beautiful Ignite UI for Angular app.  

*The parallel between design systems and chemistry was first described by Brad Frost, who explains the organization of Design Systems at length in his book “Atomic Design”

As users seek the same kind of experience from a mobile app or web app on their devices, progressive web apps have become a way for developer teams to give the best of both worlds.

In a special feature published in SD Times last year that still holds up today, we examine the benefits and drawbacks of developing and deploying these PWAs, and a blog post from January dives more deeply into what is required to build an effective PWA.

We’ve seen a great deal of uptake in PWAs since Google created the model in 2015. Testing provider, Perfecto, recently announced support for PWAs, and Microsoft earlier this month gave detailed instructions for creating PWAs on its platform.

A critical element of a PWA is the service worker. This acts as kind of a request fulfillment service and is critical for reducing latency and delivering content at the speed of a native application. Google has written an in-depth introduction to service workers to help developers get up to speed with PWAs more quickly.

Angular 6.1

The last minor 6.x release of Angular dropped about a week and a half ago, with features including router scroll position restoration, ShadowDOM v1 view encapsulation and schematics chaining, among other improvements. Stephen Fluin, Angular developer advocate at Google, details the new functionality  in a blog post.

He did say Angular developers can expect to see 7.0 betas coming soon as the team works toward the next major release.

In Angular, you can pass data from parent component to child component using @Input() decorator, and a child component can emit an event to a parent comment using @Output() decorator.

You can learn more about @Input() decorator here and about @Output decorator here.

The purpose of this blog post is to explain you whether it is pass by reference or pass by value in context of @Input() and @Output decorator.

To start with, let us assume that we have two components, as listed below:

import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
     `
})
export class VideoComponent {
 
    @Input() data: any;
    @Input() count: number;
 
}

As you see, we have two input properties.

1. In data property, we will pass an object.
2. In count property, we will pass a number.

 From the AppComponent, we are passing value for both properties, as shown below:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
}

As you see,  we are passing data (object) and count( number) to the child component. Since data is being passed as object,  it will be “Pass by Reference” and, since count is passed as number,  it will be “Pass by Value”.

Therefore, if passing an object, array, or the like,  then it is Pass by Reference, and for primitive types like number, it is Pass by Value. 

To better understand it, let us raise two events on the child component, as shown in the listing below:

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
        <button (click)='senddata()'>send data</button>
        <button (click)='sendcount()'>send count</button>
     `
})
export class VideoComponent {
 
    @Input() data: any;
    @Input() count: number;
 
    @Output() dataEvent = new EventEmitter();
    @Output() countEvent = new EventEmitter();
 
    senddata() {
        this.dataEvent.emit(this.data);
 
    }
    sendcount() {
        this.countEvent.emit(this.count);
    }
 
}

In both events, we are passing back same @Input() decorated properties to the parent component.  In dataEvent, data is passed back and, in countEvent, count is passed back to the parent component.  

In the parent component, we are capturing event as below:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' (dataEvent)='updateData($event)' (countEvent)='updateCount($event)' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
 
    updateData(d) {
        d.counter = d.counter + 1;
        console.log(this.data.counter);
    }
 
    updateCount(c) {
        c = c + 1;
        console.log(this.count);
    }
}

Let us talk through updateData and updateCount function. These functions are capturing events raised on the child component.

In the updateData function, we are incrementing value of passed parameter, however, since it is an object, it will update value of this.data and in the child component, the updated value will be rendered.

In the updateCount function, we are incrementing value of passed parameter, however, since it is primitive type it will not update this.count and in the child component, no impact will happen.

As output on clicking of button, you will find value of data is incrementing but value of count is not incrementing.

We can summarize that if we pass objects in @Input() decorator then it would be passed as reference, and if we pass primitive types, then it would be passed as value. I hope you find this article 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.

Overview and Walkthrough of the Sketch Design

We hope that you’ve already heard about Indigo.Design and one of the samples we provide with it, the People App. Infragistics’ design system provides unmatched design, usability, and code generation tooling to make collaboration between the different roles in an enterprise more fluent, rapid, and productive. Indigo.Design makes the tedious handoffs obsolete and embraces the true nature of lean product development, which you can experience hands on with the People App. 

People is a simple app that lets you browse through profiles and perform various operations on the People data such as editing their name and birthday among others, as well as adding and deleting a complete profile. With the People App, we exemplify an app creation process with Indigo.Design and have made the following resources available for you to try it yourself: 

• Sketch Design File 
• Indigo.Design Cloud Prototype 
• Ignite UI for Angular App 

This article will discuss the Sketch design containing four artboards. To clarify, the “People Home Drawer Open” is a state of the “People Home” with the navigation drawer opened, rather than a screen layout itself, therefore we will not dive into its details. Also, since “Edit Person” and “Add Person” artboards use a very similar layout, we will pick only one of the two. So, in the rest of the article, we will dive into the details of “People Home” and “Edit Person”. 

People Home 

The home screen of People holds the app navigation, as well as a list of people to the left and a profile layout to the right. The “People List” group results from the insertion, detaching from symbol and configuration of a “Generic List” from the Indigo-Components library. The most notable changes on the “Generic List” are content-related, such as the removal of its header item, and the use of a set of seven one-line list items to show the complete collection of profiles. The “People List” group is wrapped in another group, called “peopleList”, which is required for the List Component to generate code.  

To the right, a “peopleDetails” group is laid out, consisting of a background color, floating action button in the bottom right, and a centered layout of user profile UI elements in a group called “Information”. This group has fixed height and width and is positioned in the center of the “peopleDetails” group, which will instruct our code generation engine to define the necessary layout rules that would preserve this horizontal and vertical centering in the parent container in a responsive environment. Inside the “Information” group there are different elements and layout behaviors defined, which you may explore on your own after downloading the Sketch file for the People App.

Edit Person 

The “Edit Person” artboard shows a screen, through which the details for a selected person can be updated, but the high-level structure of the screen is very similar to “People Home”. Inside the “Content” group, which appears together with a background and a hidden confirmation dialog under “peopleEdit”, a more intricate layout has been designed. It uses a larger variety of Indigo-Components such as an Avatar, Icon and Raised Buttons, Inputs, Slider, Checkbox and Radio Buttons. The arrangement follows a row layout paradigm, therefore, where multiple components overlap on a horizontal row, the row is “wrapped” as a Sketch group. Such is the case of the Text used as the label of the Slider and the Slider itself, or the three Raised Buttons at the bottom. Groups are sometimes automatically established like for the File Upload Pattern, which upon detaching to generate code assets, creates a group “File Upload”. Each group or element that constitutes a row has resizing properties that define the behavior of its width on the horizontal axis and preservation of margins to the neighboring elements on the vertical one. This has been achieved by pinning to the left, top, and right and fixing the height of the elements like the “Name”, “Birthday”, “Gender”, “Ranking Group” and “IsAdmin” that span from the left to the right border of their parent group. 

That wraps up our People App, and to learn the nuts and bolts of the Indigo.Design UI Kits, feel free to download and inspect the file yourself, but why not also design an additional screen or two. If you are completely fresh to design systems and our take of them with Indigo.Design, there is a very good blog that will help you get your head around this awesome new concept and the amazing product we have put together. 

Introduction

Recently, we've been adding some really awesome Data Visualization capabilities to our Angular offerings, and I thought it might be a good idea to give some quick examples of some of the power this unlocks.

Here's a quick tour of the available Data Visualization components available so far (and more on the way!):

• igx-category-chart
  • This is our business charting component which helps you quickly chart lines, columns, areas, etc. The truly neat part is that you can feed it some data, and it will try to predict what kind of plot you might want with no configuration. We'll see exactly why that's so cool later in this article.
• igx-financial-chart
  • This is a financial charting component which provides a really rich suite of features to analyze financial specific data, all built-in to the component rather than requiring reams of extra code for you to write. Furthermore, it will also try to predict how to plot your data automatically.
• igx-radial-gauge
  • This is great for dashboards, allowing you to plot a value along a circular scale. With insanely rich animation support built in, this can really create an eye popping display.
• igx-linear-gauge
  • This is also great for dashboards, and all sorts of other use cases. Allows you to plot a value along a horizontal or vertical scale. Again, super rich animations will create compelling visuals.
• igx-bullet-graph
  • Packs a lot of dense information into a very readable format. Allows you to compare values to various measures efficiently, without excess visual noise.

The Plan

Since igx-category-chart gives us so much power to visualize data dynamically, why don't we leverage this to create some really tight integrations between a chart and a grid bound to the same data? Let's see if we can:

• Plot the same data in a chart and a grid simultaneously.
• When we hide a column in the grid, let's also hide that data from the chart.
• When we filter the data in the grid, let's also hide the non visible data from the chart.
• When we select rows in the grid, let's have only those items be visible in the chart.

The Setup

First, make sure you have the latest stable version of Node installed in your environment.

Now, Let's create an Angular project using the Angular CLI. If you don't have this installed, run:

npm install -g @angular/cli 

Once that is installed, go to a directory you'd like to hold the sample project and run:

ng new chart-and-grid

Next you can open that up in VS Code:

code chart-and-grid

And open the integrated terminal View => Integrated Terminal and type:

npm install igniteui-angular igniteui-angular-core igniteui-angular-charts

The preceding installs the Ignite UI Angular Material Components, and our Charting suite.

Adding the Grid

Next, we'll add an igx-grid to the app and bind it to some data.

First, change the app.module.ts to read as such:

import { BrowserModule } from'@angular/platform-browser';
import { BrowserAnimationsModule } from'@angular/platform-browser/animations';
import { NgModule } from'@angular/core';
import { AppComponent } from'./app.component';
import { IgxGridModule } from'igniteui-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxGridModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
exportclass AppModule { }

Here the IgxGridModule is being imported so that the igx-grid can be used in some Angular templates.

Next, change app.component.ts to read as such:

import { Component, ViewChild, OnInit } from'@angular/core';
import { IgxGridComponent } from'igniteui-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
exportclass AppComponent implements OnInit {
  title = 'app';

  @ViewChild("grid1", { read: IgxGridComponent })
  public grid1: IgxGridComponent;

  data: SalesDataItem[] = [];
  chartData: SalesDataItem[] = [];

  ngOnInit() {
    this.data = this.generateData();
    this.chartData = this.data;
  }

  private generateData(): SalesDataItem[] {
    let data = [];
    let now = newDate();
    let shoes = 18;
    let hats = 19;
    let coats = 15;
    for (var i = 0; i < 500; i++) {
      shoes += Math.round(Math.random() * 4.0 - 2.0);
      if (shoes < 0) {
        shoes = 0;
      }
      hats += Math.round(Math.random() * 4.0 - 2.0);
      if (hats < 0) {
        hats = 0;
      }
      coats += Math.round(Math.random() * 4.0 - 2.0);
      if (coats < 0) {
        coats = 0;
      }

      let date = newDate();
      date.setDate(now.getDate() - (500 - i));
      data.push(new SalesDataItem(i, date, shoes, hats, coats));
    }

    return data;
  }
}

exportclass SalesDataItem { 
  constructor(public index: number, public date: Date, public shoes: number, public hats: number, public coats: number) {

  }
}

Here we create an array of SalesDataItem, and then assign it to the data property.

Next, we can bind that data property to the grid in app.component.html:

<igx-grid
  #grid1
  width="100%"
  height="300px"
  [data]="data"
  [showToolbar]="true"
  [autoGenerate]="false"
  [columnHiding]="true"
  [rowSelectable]="true">
  <igx-column
    field="date"
    header="Date"
    [dataType]="'date'"
    sortable="true"
    filterable="true"
    [disableHiding]="true">
  </igx-column>
  <igx-column
    field="shoes"
    header="Shoes"
    [dataType]="'number'"
    sortable="true"
    filterable="true">
  </igx-column>
  <igx-column
    field="hats"
    header="Hats"
    [dataType]="'number'"
    sortable="true"
    filterable="true">
  </igx-column>
  <igx-column
    field="coats"
    header="Coats"
    [dataType]="'number'"
    sortable="true"
    filterable="true">
  </igx-column>
</igx-grid>

Here, we are binding an igx-grid to data and are individually configuring its columns to indicate that they are sortable and filterable.

To run the application type:

ng serve

at the console, and then navigate a browser to http://localhost:4200

Adding the Chart

Now that we have bound an igx-grid to the sales data, we should be able to add a chart bound to the same data, and then take things further from there.

First, we need to add IgxCategoryChartModule to app.module.ts:

import { BrowserModule } from'@angular/platform-browser';
import { BrowserAnimationsModule } from'@angular/platform-browser/animations';
import { NgModule } from'@angular/core';
import { AppComponent } from'./app.component';
import { IgxGridModule } from'igniteui-angular';
import { IgxCategoryChartModule } from'igniteui-angular-charts/ES5/igx-category-chart-module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxGridModule.forRoot(),
    IgxCategoryChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
exportclass AppModule { }

Next, we can also add the chart to the app.component.html markup, just prior to the igx-grid:

<igx-category-chart
  width="100%"
  height="300px"
  leftMargin="20"
  rightMargin="20"
  [dataSource]="chartData"
>
</igx-category-chart>

All we had to do in order to plot the data in the igx-category-chart was bind it to the dataSource property. That's it. The chart figured out everything else automatically.

Now we have both the chart and the grid pointing at the same data, but before we move on, we can clean up the visuals a bit with a couple tweaks. First, let's use a shorter date format for the Date column and the x axis, and exclude the index property from being plotted in the igx-category-chart by adding this code to the AppComponent class in app.component.ts:

  public excludedProperties: string[] = ["index"];
  
  public formatDate(val: Date) {
    return val.toLocaleDateString()
  }

  public formatDateItem(val: any) {
    return val.date.toLocaleDateString();
  }

And then, in app.component.html adding these properties to the igx-category-chart element:

  [xAxisFormatLabel]="formatDateItem"
  [excludedProperties]="excludedProperties"

and then amending the igx-column element for the date property to read:

<igx-column
  field="date"
  header="Date"
  [dataType]="'date'"
  sortable="true"
  filterable="true"
  [disableHiding]="true"
  [formatter]="formatDate"></igx-column>

excludedProperties will tell the igx-category-chart not to consider a set of properties for inclusion in the automatic visualization it performs on the provided data shape. We'll be able to do some even more impressive things with this property next.

Connecting Things Together

Since the igx-grid has some UI gestures to let us show and hide columns, wouldn't it be great if we could have these visibility changes reflect themselves in the chart also? All we need to do is at this code to AppComponent:

onColumnVisibilityChanged(args: { column: any, newValue: boolean }) {
    if (args.newValue) {
      if (this.excludedProperties.indexOf(args.column.field) == -1) {
        let newArr = this.excludedProperties.slice(0);
        newArr.push(args.column.field);
        this.excludedProperties = newArr;
      }
    } else {
      if (this.excludedProperties.indexOf(args.column.field) >= 0) {
        let newArr = this.excludedProperties.slice(0);
        newArr.splice(newArr.indexOf(args.column.field), 1);
        this.excludedProperties = newArr;
      }
    }
  }

And then add this event binding to the igx-grid element:

(onColumnVisibilityChanged)="onColumnVisibilityChanged($event)"

This has the effect of updating the excludedProperties array, which is excluding properties from the igx-category-chart, every time the user shows or hides columns from the grid.

Now, that's cool, but we also made all the columns filterable right? So can we make sure that is reflected in the igx-category-chart also? No problem. While we are at it, we'll also have selecting some rows filter down to just those rows also!

First, let's add a few more event bindings to the igx-grid element in the app.component.html file:

(onRowSelectionChange)="onRowSelectionChange($event)"
(onFilteringDone)="onFilteringDone($event)"

These will fire when the row selection state changes, or the filtering changes are complete in the grid. So we just need to react to those changes by updating the data to which the chart is bound.

All we need is to implement those two event handlers:

  public onRowSelectionChange(args: any) {
    window.setTimeout(
    () => {
    let sel = this.grid1.selectedRows();
    if (sel == null || sel.length == 0) {
      this.chartData = this.data;
    } else {
      this.chartData = sel;
    }
    }, 0);
  }

  public onFilteringDone(args: any) {
    this.grid1.selectRows([], true);
    window.setTimeout(() => {
    this.chartData = this.grid1.filteredData ? this.grid1.filteredData: this.grid1.data;
    });
  }

These just take either the selected rows, or the current filtered view of the data, and assign those to the igx-category-chart. Super simple, but the results are very compelling.

You can see a preview here:

Or check out a running version on StackBlitz, and the code that powers it.

We truly have some very neat Data Visualization capabilities in Ignite UI for Angular now that we are excited for you to check out!

By David Rubinstein

It’s no secret that Microsoft is all in on the cloud. From CEO Satya Nadella’s statement in 2014 that Microsoft would take a mobile-first, cloud-first approach to software development, to its reorganization in March to put Azure at the core of its efforts, the company has clearly shifted away from its Windows-centric view of the world.

The impact of that move on developer tools for Microsoft’s cloud platform has been almost as profound. SD Times news editor Christina Cardoza spoke with longtime Microsoft Regional Director Patrick Hynds to better understand what this strategic shift could mean for the Visual Studio ecosystem.

In the article, Hynds states: “I think that it offers some interesting challenges and tons of opportunity. The cloud is fast moving and that cries out with the need for better tooling. There are more niches being exposed every month where a tools provider can really carve out a world of their own.”

Visual Studio Update

Microsoft also released Visual Studio 15.8 last week. Among the new features are faster git branch switching, faster unit test execution, and TypeScript 3.0 support.

After this release, git branch checkout and branch switching for C#, VB, and C++ projects is much faster. This is because reloading is no longer required.

Angular Migration Tools

For AngularJS developers, Angular has created two migration tools to help move those applications to more modern web development standards with Angular. One of the tools assesses the current application to see which migration path is best, while the other creates a community forum in which developers can share their experiences and exchange thoughts and ideas. 

A Push Towards Windows 10

I used to have a Windows Phone, running the Windows 8.1 update, but finally had to give it up because so few apps were available for the phone. Last week, Microsoft announced it would no longer accept Windows 8 apps in its store, encouraging developers to create or update their apps for Windows 10 devices.

As of October 31, 2018, Microsoft will stop accepting new applications for Windows Phone 8.x or earlier and Windows 8/8.1 packages. According to the company, this will not affect existing apps. And, starting in July 2023, the company will no longer produce updates for Windows 8.

At my job, I get the opportunity to talk to many .NET developers who want to learn Angular. Often, I’ve seen that they bring their .NET skills and work to map that in the learning of Angular. While the effort and drive to learn is there Angular is not .NET.

Since Angular is a pure JavaScript library, I’ll simplify basic but important concepts of Angular to .NET developers in this post series.  

In this article, we’ll learn about Data Bindings in Angular. Luckily, Data Binding in Angular is much simpler than in .NET.  

First, Let’s revise some of data binding techniques in .NET. For example, in ASP.NET MVC, you do data binding using a model. View is bound 

1. To an object
2. To a complex object
3. To a collection of objects

Essentially, in ASP.NET MVC, you do data binding to a model class. On the other hand, in WPF, you have data binding modes available. You can set the mode of data binding in XAML, as follows:

1. One-way data binding
2. Two-way data binding
3. One-time data binding
4. One-way to source data binding

If you are following MVVM patterns, then you might be using INotifyPropertyChanged interface to achieve two-way data binding. Therefore, there are many ways data bindings are achieved in world of .NET.

 Data binding in Angular, however,  is much simpler.

If you are extremely new in Angular, then let me introduce you to Components. In Angular applications, what you see in the browser (or elsewhere) is a component. A component  consists of the following parts:

1. A TypeScript class called Component class
2. A HTML file called Template of the component
3. An optional CSS file for the styling of the component

In Angular, Data Binding determines how data will flow in between Component class and Component Template.

Angular provides us three types of data bindings. They are as follows:

1. Interpolation
2. Property Binding
3. Event Binding

Let’s see each one by one.

Interpolation

Angular interpolation is one-way data binding. It is used to pass data from component class to the template. The syntax of interpolation is {{propertyname}}.

Let’s say that we have component class as shown below:

export class AppComponent {
 
      product = {
          title: 'Cricket Bat',
          price: 500
      };
 
  }

We need to pass the product from the component class to the template. Keep in mind that to keep example simple, I’m hard coding the value of the product object, however, in a real scenario, data could be fetched from the database using the API.  We can display value of the product object using interpolation, as shown in the listing below:

<h1>Product</h1> <h2>Title : {{product.title}}</h2> <h2>Price : {{product.price}}</h2>

Using interpolation, data is passed from the component class to the template. Ideally, whenever the value of the product object is changed, the template will be updated with the updated value of the product object.

In Angular, there is something called ChangeDetector Service, which makes sure that value of property in the component class and the template are in sync with each other.

Therefore, if you want to display data in Angular, you should use interpolation data binding.

Property Binding

Angular provides you with a second type of binding called “Property Binding”. The syntax of property binding is the square bracket []. It allows to set the property of HTML elements on atemplate with the property from the component class.  

So, let’s say that you have a component class like the one below:

export class AppComponent {
 
       btnHeight = 100;
       btnWidth = 100;
   }

Now, you can set height and width properties of a button on template with the properties of the component class using the property binding.

<button 
  [style.height.px] = 'btnHeight'    [style.width.px] = 'btnWidth' >        Add Product
</button >

Angular Property Binding is used to set the property of HTML Elements with the properties of the component class. You can also set properties of other HTML elements  like image, list, table, etc.  Whenever the property’s value in the component class  changes, the HTML element property will be updated in the property binding.

Event Binding

Angular provides you third type of binding to capture events raised on template in a component class. For instance, there’s a button on the component template and, on click of the button, you want to call a function in component class. You can do this using Event Binding. The syntax behind Event Binding is (eventname).

For this example, you might have a component class like this:

export class AppComponent {
 
     addProduct() {
         console.log('add product');
     }
 
 }

You want to call addProduct function on the click of the button on the template. You can do this using event binding:

 
<h1>Product</h1><button (click)='addProduct()'>    Add Product
</button>

You can do event binding with all events of a HTML elements which is part of Angular ngZone. You can learn more about it here.

Angular provides you these three bindings. In event binding, data flows from template to class and, in property binding and interpolation, data flows from class to template.

Two-Way Data Binding

Angular does not have built-in two-way data binding, however, by combining Property Binding and Event Binding, you can achieve Two-Way Data Binding.

Angular provides us a directive, ngModel, to achieve two-way data binding, and It’s very easy to use. First, import FormsModule and then you can create two-way data binding:

export class AppComponent {
 
     name = 'foo';
 }

We can two-way data bind the name property with an input box:

<input type="text" [(ngModel)]='name' /><h2>{{name}}</h2>

As you see,  we are using [(ngModel)] to create two-way data binding in between input control and name property. Whenever a user changes the value of the input box, the name property will be updated and vice versa.

As a .NET developer, now you might have realized that data binding in Angular is much simpler, and all you need to know is four syntaxes. I hope you find this post useful and, in further posts, we will cover other topics of Angular.  

 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.

All up-to-date with Angular 7

We have now updated Ignite UI for Angular dependencies to Angular 7. You can easily update your project to the newest Ignite UI for Angular version using the “ng update” command of the Angular CLI – “ng update igniteui-angular”. The newest version also includes new features and components, as well as enhancements to existing components and bug fixes.

Introducing ng add support

Did you have trouble adding Ignite UI for Angular to your existing Angular project? You no longer have to create your project using the Ignite UI CLI in order to get started with Ignite UI for Angular! Adding our package to your project to use the components is now as easy as “ng add igniteui-angular!"

New Goodies in Theming

Introducing Schemas. Schemas are a simple, declarative way to list all the properties that a component theme might use. They are like recipes, simple Sass maps, that allow us to define all properties a theme might use. Those properties can be colors, shadows, margins, paddings, etc. Anything a theme consumes can be described as a schema, then passed to the global or component theme. A component schema can extend an existing component schema and override the properties of the former.

You can dive deeper into the global and component themes Ignite UI for Angular exposes.

IgxBanner

We have also introduced a new component with Ignite UI for Angular 7: the IgxBanner. It supports a Banner component that is shown at the full width of the screen (above the app content but below a Navigation Bar) if available. The Banner is a mildly interruptive interface that provides contextual information and may only be dismissed by the user (unlike Snackbar and similarly to a Dialog, but in a non-modal fashion). The Banner is a component that is displayed at the top of an application (below a NavBar component, if such exists) and can contain template-able content and a collection of up to two actions.

Component improvements

An enhancement introduced in the IgxNavBar: we have made the title part template-able so that the developers can now add custom content around their application titles, like logos or icons. We have added the igx-action-icon directive that can be used to provide any custom icon to the NavBar as an action icon, and not just icons from the material font set.

The IgxCombo and the IgxChips now both support different display densities.

Bug Fixing

We have also released a lot of bug fixes with the new releases of Ignite UI for Angular 7. You can get the full list of bug fixes from our release notes.

We just released an update to our Indigo.Design Code Generator extension for Visual Studio Code. This update contains the following changes:

• Fixed bug where basic routes were not generated when the Basic Routes setting was enabled and the application was using routing modules.

• Unlocked the version of the igniteui-angular package. Now it will install the version that matches the version of Angular being used in the project. For example, if Angular 6 is being used then igniteui-angular@6.x will be installed. If Angular 7 is being used then igniteui-angular@7.x will be installed.

The last bullet is related to a change in our code gen web service due to breaking changes introduced in the Ignite UI for Angular product. In the previous version of our Visual Studio Code extension we had locked the version of Ignite UI for Angular to 6.2.0 in order to avoid the breaking change introduced in 6.2.1. Since we have now updated the code gen web service to use the new $schema property we can switch back to using the latest version of Ignite UI for Angular.

This, however, means that the code that we generate will no longer work with version 6.2.0 or older of Ignite UI for Angular. You will need to use 6.2.1 or later. If you are starting with a fresh project then you’ll have nothing to worry about as the extension will install the proper version for you but for existing applications developers will need to manually update the package.

You can download the update from here by clicking the Download Indigo.Design Assets button and then selecting Indigo.Design code generator from the list.

There are four ways to create an object in JavaScript. They are as follows:

1. Object as literal
2. Constructor Invocation Pattern
3. create() method
4. Using class after ES6

Implementation of Inheritance varies according to the object creation method. In this post, I am going to explain creating inheritance in between a function constructor.

Let’s say you have a function:

function animal(name, age) {
    this.name = name;
    this.age = age;
}

If you call the animal function using new operator, an object will be created. This way of object creation is also known as “Constructor Invocation Pattern”

var dog = new animal('foo', 5);
console.log(dog);
var cat = new animal('koo', 3);
console.log(cat);

Object dog and cat both have their own names and age properties. If you want a property or method to be shared across all objects, add that to the prototype of the function.

animal.prototype.canRun = function () {
 
    console.log('yes ' + this.name + ' can run !');
}

Using the JavaScript prototype chain, both dog and cat objects can access the canRun method.

var dog = new animal('foo', 5);
dog.canRun(); // yes foo can run
var cat = new animal('koo', 3);
cat.canRun(); // yes koo can run

Next, let us create another constructor – human:

function human(name, age, money) {
    animal.call(this, name, age);
    this.money = money;
}
 
human.prototype.canEarn = function () {
    console.log('yes ' + this.name + 'can earn');
}

At this point in time, human and animal functions do not have any relationship. However, we know that human is also an animal. There are two problems with the human constructor.

1. It has duplicate codes for name and age initialization. It should use animal constructor for this purpose.
2. It does not have any link with animal constructor

The above said two problems can be removed by creating inheritance in between animal and human function constructors.

You can solve problem 1 of code duplication by modifying the human function as below:

function human(name, age, money) {
    animal.call(this, name, age);
    this.money = money;
}

Now, in human function, we are using the call method to manually pass a current object as a value of ‘this’ in animal function. This approach is also called Indirect Invocation Pattern. Now, an object instance for human can be created as shown below:

var h1 = new human('dj', 30, '2000 $');
console.log(h1); 

So far, we have solved problem 1 of code duplication; however, human function is still not linked to animal function. If you try to call canRun method on h1 object, JavaScript will throw you an error.

h1.canRun(); // throw error canRun is not a function 

You can fix this problem by linking the prototype of the human function with the prototype of the animal function constructor. There are two ways to do that.

1. Using __proto__
2. Using Object.create() method

 You can link prototype of function constructors using Object.create() as shown below:

human.prototype = Object.create(animal.prototype);

You can link prototype of function constructors using __proto__ as shown below:

human.prototype.__proto__ = animal.prototype;

I would prefer the Object.create() method because__proto__ may not be supported in many browsers. After linking prototypes, in one way, you have created inheritance in between animal and human function constructors. Object instance of human can read all properties of animal function and can execute animal function methods.

For your reference, the full source code to implement inheritance between function constructors is listed below:

function animal(name, age) {
 
    this.name = name;
    this.age = age;
 
}
 
animal.prototype.canRun = function () {
 
    console.log('yes ' + this.name + ' can run !');
}
 
var dog = new animal('foo', 5);
dog.canRun();
 
var cat = new animal('koo', 3);
cat.canRun();
function human(name, age, money) {
    animal.call(this, name, age);
    this.money = money;
}
 
human.prototype = Object.create(animal.prototype);
 
human.prototype.canEarn = function () {
    console.log('yes ' + this.name + 'can earn');
}
// human.prototype.__proto__ = animal.prototype;
var h1 = new human('dj', 30, '2000 $');
h1.canRun();
h1.canEarn();

To create inheritance between function constructors, always keep perform the following two actions:

1. Call parent constructor using call or apply.
2. Link the prototype of the child constructor to the parent constructor prototype

I hope now you understand how to implement inheritance between function constructors in JavaScript.

In Angular, you can pass data from parent component to child component using @Input() decorator, and a child component can emit an event to a parent comment using @Output() decorator.

You can learn more about @Input() decorator here and about @Output decorator here.

The purpose of this blog post is to explain you whether it is pass by reference or pass by value in context of @Input() and @Output decorator.

To start with, let us assume that we have two components, as listed below:

import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
     `
})
export class VideoComponent {
 
    @Input() data: any;
    @Input() count: number;
 
}

As you see, we have two input properties.

1. In data property, we will pass an object.
2. In count property, we will pass a number.

 From the AppComponent, we are passing value for both properties, as shown below:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
}

As you see,  we are passing data (object) and count( number) to the child component. Since data is being passed as object,  it will be “Pass by Reference” and, since count is passed as number,  it will be “Pass by Value”.

Therefore, if passing an object, array, or the like,  then it is Pass by Reference, and for primitive types like number, it is Pass by Value. 

To better understand it, let us raise two events on the child component, as shown in the listing below:

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
        <button (click)='senddata()'>send data</button>
        <button (click)='sendcount()'>send count</button>
     `
})
export class VideoComponent {
 
    @Input() data: any;
    @Input() count: number;
 
    @Output() dataEvent = new EventEmitter();
    @Output() countEvent = new EventEmitter();
 
    senddata() {
        this.dataEvent.emit(this.data);
 
    }
    sendcount() {
        this.countEvent.emit(this.count);
    }
 
}

In both events, we are passing back same @Input() decorated properties to the parent component.  In dataEvent, data is passed back and, in countEvent, count is passed back to the parent component.  

In the parent component, we are capturing event as below:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' (dataEvent)='updateData($event)' (countEvent)='updateCount($event)' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
 
    updateData(d) {
        d.counter = d.counter + 1;
        console.log(this.data.counter);
    }
 
    updateCount(c) {
        c = c + 1;
        console.log(this.count);
    }
}

Let us talk through updateData and updateCount function. These functions are capturing events raised on the child component.

In the updateData function, we are incrementing value of passed parameter, however, since it is an object, it will update value of this.data and in the child component, the updated value will be rendered.

In the updateCount function, we are incrementing value of passed parameter, however, since it is primitive type it will not update this.count and in the child component, no impact will happen.

As output on clicking of button, you will find value of data is incrementing but value of count is not incrementing.

We can summarize that if we pass objects in @Input() decorator then it would be passed as reference, and if we pass primitive types, then it would be passed as value. I hope you find this article 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.

Overview and Walkthrough of the Sketch Design

We hope that you’ve already heard about Indigo.Design and one of the samples we provide with it, the People App. Infragistics’ design system provides unmatched design, usability, and code generation tooling to make collaboration between the different roles in an enterprise more fluent, rapid, and productive. Indigo.Design makes the tedious handoffs obsolete and embraces the true nature of lean product development, which you can experience hands on with the People App. 

People is a simple app that lets you browse through profiles and perform various operations on the People data such as editing their name and birthday among others, as well as adding and deleting a complete profile. With the People App, we exemplify an app creation process with Indigo.Design and have made the following resources available for you to try it yourself: 

• Sketch Design File 
• Indigo.Design Cloud Prototype 
• Ignite UI for Angular App 

This article will discuss the Sketch design containing four artboards. To clarify, the “People Home Drawer Open” is a state of the “People Home” with the navigation drawer opened, rather than a screen layout itself, therefore we will not dive into its details. Also, since “Edit Person” and “Add Person” artboards use a very similar layout, we will pick only one of the two. So, in the rest of the article, we will dive into the details of “People Home” and “Edit Person”. 

People Home 

The home screen of People holds the app navigation, as well as a list of people to the left and a profile layout to the right. The “People List” group results from the insertion, detaching from symbol and configuration of a “Generic List” from the Indigo-Components library. The most notable changes on the “Generic List” are content-related, such as the removal of its header item, and the use of a set of seven one-line list items to show the complete collection of profiles. The “People List” group is wrapped in another group, called “peopleList”, which is required for the List Component to generate code.  

To the right, a “peopleDetails” group is laid out, consisting of a background color, floating action button in the bottom right, and a centered layout of user profile UI elements in a group called “Information”. This group has fixed height and width and is positioned in the center of the “peopleDetails” group, which will instruct our code generation engine to define the necessary layout rules that would preserve this horizontal and vertical centering in the parent container in a responsive environment. Inside the “Information” group there are different elements and layout behaviors defined, which you may explore on your own after downloading the Sketch file for the People App.

Edit Person 

The “Edit Person” artboard shows a screen, through which the details for a selected person can be updated, but the high-level structure of the screen is very similar to “People Home”. Inside the “Content” group, which appears together with a background and a hidden confirmation dialog under “peopleEdit”, a more intricate layout has been designed. It uses a larger variety of Indigo-Components such as an Avatar, Icon and Raised Buttons, Inputs, Slider, Checkbox and Radio Buttons. The arrangement follows a row layout paradigm, therefore, where multiple components overlap on a horizontal row, the row is “wrapped” as a Sketch group. Such is the case of the Text used as the label of the Slider and the Slider itself, or the three Raised Buttons at the bottom. Groups are sometimes automatically established like for the File Upload Pattern, which upon detaching to generate code assets, creates a group “File Upload”. Each group or element that constitutes a row has resizing properties that define the behavior of its width on the horizontal axis and preservation of margins to the neighboring elements on the vertical one. This has been achieved by pinning to the left, top, and right and fixing the height of the elements like the “Name”, “Birthday”, “Gender”, “Ranking Group” and “IsAdmin” that span from the left to the right border of their parent group. 

That wraps up our People App, and to learn the nuts and bolts of the Indigo.Design UI Kits, feel free to download and inspect the file yourself, but why not also design an additional screen or two. If you are completely fresh to design systems and our take of them with Indigo.Design, there is a very good blog that will help you get your head around this awesome new concept and the amazing product we have put together. 

Introduction

Recently, we've been adding some really awesome Data Visualization capabilities to our Angular offerings, and I thought it might be a good idea to give some quick examples of some of the power this unlocks.

Here's a quick tour of the available Data Visualization components available so far (and more on the way!):

• igx-category-chart
  • This is our business charting component which helps you quickly chart lines, columns, areas, etc. The truly neat part is that you can feed it some data, and it will try to predict what kind of plot you might want with no configuration. We'll see exactly why that's so cool later in this article.
• igx-financial-chart
  • This is a financial charting component which provides a really rich suite of features to analyze financial specific data, all built-in to the component rather than requiring reams of extra code for you to write. Furthermore, it will also try to predict how to plot your data automatically.
• igx-radial-gauge
  • This is great for dashboards, allowing you to plot a value along a circular scale. With insanely rich animation support built in, this can really create an eye popping display.
• igx-linear-gauge
  • This is also great for dashboards, and all sorts of other use cases. Allows you to plot a value along a horizontal or vertical scale. Again, super rich animations will create compelling visuals.
• igx-bullet-graph
  • Packs a lot of dense information into a very readable format. Allows you to compare values to various measures efficiently, without excess visual noise.

The Plan

Since igx-category-chart gives us so much power to visualize data dynamically, why don't we leverage this to create some really tight integrations between a chart and a grid bound to the same data? Let's see if we can:

• Plot the same data in a chart and a grid simultaneously.
• When we hide a column in the grid, let's also hide that data from the chart.
• When we filter the data in the grid, let's also hide the non visible data from the chart.
• When we select rows in the grid, let's have only those items be visible in the chart.

The Setup

First, make sure you have the latest stable version of Node installed in your environment.

Now, Let's create an Angular project using the Angular CLI. If you don't have this installed, run:

npm install -g @angular/cli 

Once that is installed, go to a directory you'd like to hold the sample project and run:

ng new chart-and-grid

Next you can open that up in VS Code:

code chart-and-grid

And open the integrated terminal View => Integrated Terminal and type:

npm install igniteui-angular igniteui-angular-core igniteui-angular-charts

The preceding installs the Ignite UI Angular Material Components, and our Charting suite.

Adding the Grid

Next, we'll add an igx-grid to the app and bind it to some data.

First, change the app.module.ts to read as such:

import { BrowserModule } from'@angular/platform-browser';
import { BrowserAnimationsModule } from'@angular/platform-browser/animations';
import { NgModule } from'@angular/core';
import { AppComponent } from'./app.component';
import { IgxGridModule } from'igniteui-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxGridModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
exportclass AppModule { }

Here the IgxGridModule is being imported so that the igx-grid can be used in some Angular templates.

Next, change app.component.ts to read as such:

import { Component, ViewChild, OnInit } from'@angular/core';
import { IgxGridComponent } from'igniteui-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
exportclass AppComponent implements OnInit {
  title = 'app';

  @ViewChild("grid1", { read: IgxGridComponent })
  public grid1: IgxGridComponent;

  data: SalesDataItem[] = [];
  chartData: SalesDataItem[] = [];

  ngOnInit() {
    this.data = this.generateData();
    this.chartData = this.data;
  }

  private generateData(): SalesDataItem[] {
    let data = [];
    let now = newDate();
    let shoes = 18;
    let hats = 19;
    let coats = 15;
    for (var i = 0; i < 500; i++) {
      shoes += Math.round(Math.random() * 4.0 - 2.0);
      if (shoes < 0) {
        shoes = 0;
      }
      hats += Math.round(Math.random() * 4.0 - 2.0);
      if (hats < 0) {
        hats = 0;
      }
      coats += Math.round(Math.random() * 4.0 - 2.0);
      if (coats < 0) {
        coats = 0;
      }

      let date = newDate();
      date.setDate(now.getDate() - (500 - i));
      data.push(new SalesDataItem(i, date, shoes, hats, coats));
    }

    return data;
  }
}

exportclass SalesDataItem { 
  constructor(public index: number, public date: Date, public shoes: number, public hats: number, public coats: number) {

  }
}

Here we create an array of SalesDataItem, and then assign it to the data property.

Next, we can bind that data property to the grid in app.component.html:

<igx-grid
  #grid1
  width="100%"
  height="300px"
  [data]="data"
  [showToolbar]="true"
  [autoGenerate]="false"
  [columnHiding]="true"
  [rowSelectable]="true">
  <igx-column
    field="date"
    header="Date"
    [dataType]="'date'"
    sortable="true"
    filterable="true"
    [disableHiding]="true">
  </igx-column>
  <igx-column
    field="shoes"
    header="Shoes"
    [dataType]="'number'"
    sortable="true"
    filterable="true">
  </igx-column>
  <igx-column
    field="hats"
    header="Hats"
    [dataType]="'number'"
    sortable="true"
    filterable="true">
  </igx-column>
  <igx-column
    field="coats"
    header="Coats"
    [dataType]="'number'"
    sortable="true"
    filterable="true">
  </igx-column>
</igx-grid>

Here, we are binding an igx-grid to data and are individually configuring its columns to indicate that they are sortable and filterable.

To run the application type:

ng serve

at the console, and then navigate a browser to http://localhost:4200

Adding the Chart

Now that we have bound an igx-grid to the sales data, we should be able to add a chart bound to the same data, and then take things further from there.

First, we need to add IgxCategoryChartModule to app.module.ts:

import { BrowserModule } from'@angular/platform-browser';
import { BrowserAnimationsModule } from'@angular/platform-browser/animations';
import { NgModule } from'@angular/core';
import { AppComponent } from'./app.component';
import { IgxGridModule } from'igniteui-angular';
import { IgxCategoryChartModule } from'igniteui-angular-charts/ES5/igx-category-chart-module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxGridModule.forRoot(),
    IgxCategoryChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
exportclass AppModule { }

Next, we can also add the chart to the app.component.html markup, just prior to the igx-grid:

<igx-category-chart
  width="100%"
  height="300px"
  leftMargin="20"
  rightMargin="20"
  [dataSource]="chartData"
>
</igx-category-chart>

All we had to do in order to plot the data in the igx-category-chart was bind it to the dataSource property. That's it. The chart figured out everything else automatically.

Now we have both the chart and the grid pointing at the same data, but before we move on, we can clean up the visuals a bit with a couple tweaks. First, let's use a shorter date format for the Date column and the x axis, and exclude the index property from being plotted in the igx-category-chart by adding this code to the AppComponent class in app.component.ts:

  public excludedProperties: string[] = ["index"];
  
  public formatDate(val: Date) {
    return val.toLocaleDateString()
  }

  public formatDateItem(val: any) {
    return val.date.toLocaleDateString();
  }

And then, in app.component.html adding these properties to the igx-category-chart element:

  [xAxisFormatLabel]="formatDateItem"
  [excludedProperties]="excludedProperties"

and then amending the igx-column element for the date property to read:

<igx-column
  field="date"
  header="Date"
  [dataType]="'date'"
  sortable="true"
  filterable="true"
  [disableHiding]="true"
  [formatter]="formatDate"></igx-column>

excludedProperties will tell the igx-category-chart not to consider a set of properties for inclusion in the automatic visualization it performs on the provided data shape. We'll be able to do some even more impressive things with this property next.

Connecting Things Together

Since the igx-grid has some UI gestures to let us show and hide columns, wouldn't it be great if we could have these visibility changes reflect themselves in the chart also? All we need to do is at this code to AppComponent:

onColumnVisibilityChanged(args: { column: any, newValue: boolean }) {
    if (args.newValue) {
      if (this.excludedProperties.indexOf(args.column.field) == -1) {
        let newArr = this.excludedProperties.slice(0);
        newArr.push(args.column.field);
        this.excludedProperties = newArr;
      }
    } else {
      if (this.excludedProperties.indexOf(args.column.field) >= 0) {
        let newArr = this.excludedProperties.slice(0);
        newArr.splice(newArr.indexOf(args.column.field), 1);
        this.excludedProperties = newArr;
      }
    }
  }

And then add this event binding to the igx-grid element:

(onColumnVisibilityChanged)="onColumnVisibilityChanged($event)"

This has the effect of updating the excludedProperties array, which is excluding properties from the igx-category-chart, every time the user shows or hides columns from the grid.

Now, that's cool, but we also made all the columns filterable right? So can we make sure that is reflected in the igx-category-chart also? No problem. While we are at it, we'll also have selecting some rows filter down to just those rows also!

First, let's add a few more event bindings to the igx-grid element in the app.component.html file:

(onRowSelectionChange)="onRowSelectionChange($event)"
(onFilteringDone)="onFilteringDone($event)"

These will fire when the row selection state changes, or the filtering changes are complete in the grid. So we just need to react to those changes by updating the data to which the chart is bound.

All we need is to implement those two event handlers:

  public onRowSelectionChange(args: any) {
    window.setTimeout(
    () => {
    let sel = this.grid1.selectedRows();
    if (sel == null || sel.length == 0) {
      this.chartData = this.data;
    } else {
      this.chartData = sel;
    }
    }, 0);
  }

  public onFilteringDone(args: any) {
    this.grid1.selectRows([], true);
    window.setTimeout(() => {
    this.chartData = this.grid1.filteredData ? this.grid1.filteredData: this.grid1.data;
    });
  }

These just take either the selected rows, or the current filtered view of the data, and assign those to the igx-category-chart. Super simple, but the results are very compelling.

You can see a preview here:

Or check out a running version on StackBlitz, and the code that powers it.

We truly have some very neat Data Visualization capabilities in Ignite UI for Angular now that we are excited for you to check out!

By David Rubinstein

It’s no secret that Microsoft is all in on the cloud. From CEO Satya Nadella’s statement in 2014 that Microsoft would take a mobile-first, cloud-first approach to software development, to its reorganization in March to put Azure at the core of its efforts, the company has clearly shifted away from its Windows-centric view of the world.

The impact of that move on developer tools for Microsoft’s cloud platform has been almost as profound. SD Times news editor Christina Cardoza spoke with longtime Microsoft Regional Director Patrick Hynds to better understand what this strategic shift could mean for the Visual Studio ecosystem.

In the article, Hynds states: “I think that it offers some interesting challenges and tons of opportunity. The cloud is fast moving and that cries out with the need for better tooling. There are more niches being exposed every month where a tools provider can really carve out a world of their own.”

Visual Studio Update

Microsoft also released Visual Studio 15.8 last week. Among the new features are faster git branch switching, faster unit test execution, and TypeScript 3.0 support.

After this release, git branch checkout and branch switching for C#, VB, and C++ projects is much faster. This is because reloading is no longer required.

Angular Migration Tools

For AngularJS developers, Angular has created two migration tools to help move those applications to more modern web development standards with Angular. One of the tools assesses the current application to see which migration path is best, while the other creates a community forum in which developers can share their experiences and exchange thoughts and ideas. 

A Push Towards Windows 10

I used to have a Windows Phone, running the Windows 8.1 update, but finally had to give it up because so few apps were available for the phone. Last week, Microsoft announced it would no longer accept Windows 8 apps in its store, encouraging developers to create or update their apps for Windows 10 devices.

As of October 31, 2018, Microsoft will stop accepting new applications for Windows Phone 8.x or earlier and Windows 8/8.1 packages. According to the company, this will not affect existing apps. And, starting in July 2023, the company will no longer produce updates for Windows 8.