Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

WPF 2018 Volume 2 Volume Release (Build 18.2.20182.137)

• PDF - Infragistics for WPF 2018 Volume 2
• Excel - Infragistics for WPF 2018 Volume 2

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

Windows Forms 2018 Volume 2 Volume Release (Build 18.2.20182.130)

• PDF - Infragistics for Windows Forms 2018 Volume 2
• Excel - Infragistics for Windows Forms 2018 Volume 2

We are excited to announce that we have just released the next version of our Indigo.Design Code Generator extension for VS Code. You can download the latest version at our Indigo.Design website. Just sign in and click on the Download Indigo.Design Assets button at the bottom left.

Here are the highlights for this release:

Theming

We have implemented theme generation along side the code generation. This means that when you generate code, not only will you get the HTML and SCSS required to render and layout the Ignite UI for Angular components but you will now get extra SCSS that contains the palettes used by the designer in Sketch. Previously we did not generate these theme files which meant that users were stuck using the default theme that comes with Ignite UI for Angular. If your designer had changed the palettes used on their end in Sketch, developers would have to manually implement those same palettes into their application.

Previous output:

That is no longer necessary, however there is a prerequisite for using this feature. See the below theme plugin section for more.

Indigo.Design Theme Plugin

Along side this release we are also providing a plugin for Sketch to help make theme generation easier on us. This plugin will also make it easier for designers to adjust color palettes in the Indigo.Design Sketch libraries. Designers can read more about how to use the plugin here. For code generation specifically, this plugin will insert some metadata into the Sketch file which we then read in the VS Code extension. This metadata contains information about what palette color and font information should be used for that specific Sketch file. From there we can generate the required SCSS to apply those colors to the generated components. If this plugin is not used to apply a theme then the extension will only generate the default theme.

Note
Previously we had a Sketch plugin called Indigo Sync however this plugin has been merged with this new theme plugin to create a new Indigo.Design Tools plugin. Both plugins can live side by side however the Indigo Sync plugin is no longer necessary. Please use the Indigo.Design Tools plugin from now on.

Applying Themes Globally

One thing to be aware of with these themes is that when they generate they will be scoped to just the generated components. Fortunately it is still very easy to take the generated theme and apply it globally. You can find more information about how to apply themes globally here, however, below you can find a quick example.

The first thing you need to do is open your global SCSS file. The default file that comes with Angular projects is styles.scss. Open this file and add the following SCSS:

// Make sure to replace 'themeName' with the folder name of your
// generated theme.

@import'~igniteui-angular/lib/core/styles/themes/utilities';

// This is the generated _palette.scss file. It has the color
// information for the theme. It also overrides $default-palette.
@import'./themes/themeName/palette';

@import'~igniteui-angular/lib/core/styles/themes/index';

@include igx-core();
@include igx-theme($default-palette);

// This is the generated _typography.scss file.
@import'./themes/themeName/typography';

The call to igx-theme sets up the themes for all the Ignite UI for Angular components. The last line sets up the typography for the application however you won't see any typography changes in your app until you add the igx-typography CSS class to your HTML. This is usually done on the body tag in index.html.

<bodyclass="igx-typography">
    <app-root></app-root>
</body>

And that's it! Your entire app is now using the generated theme.

Ignite UI CLI

Another feature we added to this release, although very minor, improves the experience when generating into a project created using the Ignite UI CLI. Normally when you create a new project using the Ignite UI CLI it creates a very small demo application within it. In this demo you will see a navigation drawer already provided for you.

This new feature we added will allow code generated components to automatically appear inside this navigation drawer so that you can quickly navigate to the component and view it live. In order to see this feature in action you will first need to enable Basic Routes in the extension settings.

Once this setting is enabled, generate your code into your Angular project that was created using the Ignite UI CLI. Make sure to select AppModule as your target module in the extension dialog. Once code generation is complete you should see a route added to either app.module.ts or app-routing.module.ts if routing modules are used. Now when you run the application you should see your newly generated component displayed inside the Navigation Drawer.

Note
Not shown above but I needed to add width: 100% to the generated component CSS to make it fill horizontally. The Ignite UI CLI project is using flex-box around the router-outlet which doesn't automatically have content fill the space. I just added this to the component css:

:host {
   width: 100%;
}

Conclusion

This latest version of the Indigo.Design Code Generator brings theming your apps to a whole new level making it easier than ever to theme generated components. We are excited to bring these amazing new features to you and hope you are too.

When it comes to words, those who read visually can manage almost three times as many per minute as regular readers. Under pressure of time to complete a task, that means that their ability to process visually allows them either to deliver in significantly less time – or to use that extra time to strategize towards a more thoughtful conclusion.

When it comes to data, we understand much less about individual processing styles not least because we increasingly rely on technology to read the data for us.  But in many environments working with live data, advantage depends on individual judgement, drawn from identifying the patterns hiding within constantly changing data. A good DataGrid can do a lot to help, in directing the eye to the selection it needs – but on its own, that can only go so far.

The brain needs to recognize the material coming in, sort it into categories, understand what is already known and what is new, and encode the information in order to learn from it. It does this most effectively when the information can somehow be fitted in to a known framework.

Even as our grasp of artificial intelligence expands, there is so much about the human brain we don’t yet understand. But it is clear that pictures can trigger critical skills and unlock new solutions. The speed of visual recognition compared to pure cognition also allows the brain to respond more rapidly to information presented in this way.

It took more than a millennium and a half from when human being created the first DataGrid, to the creation of the first information charts. Now the market-leading Adaptable Blotter from Adaptable Tools and Infragistics’ charting capability have worked together to deliver a fully integrated offering. 

Launched this week, the combination includes charts which update automatically as the DataGrid changes, provided in multiple different formats and styles to enable personalized views, and the ability to share charts easily with colleagues. 

Florence Nightingale’s charts delivered seismic changes in army hygiene. Charts used to analyze London cholera deaths in 1854 managed to detect the source of the disease. Lives may not be at stake in these scenarios, but nonetheless the chart / DataGrid combination will free up valuable extra seconds that makes all the difference.

Try it out for yourself, check out the Basic Chart demo or World Stats Chart demo or take a look at our step-by-step video guide.

The 7.2.0 release could be the biggest for Ignite UI for Angular up to date. This release delivers the largest component yet to make it into the toolkit, as well as massive improvements to other commonly used features and components. Version 7.2.0 features only user features request posted over the last several months, which is reinforcing the statement that we are committed to user success with Ignite UI for Angular.

Hierarchical Data Grid

So let us starts this review with the most significant and the largest new component we are releasing - the Hierarchical Data Grid A.K.A. Hierarchical Data Table. Using this Data Grid you can display your data in a hierarchical view where you have parent records linked to child tables. Upon expanding a parent row and number of children data grids are shown. You can control features like filtering, sorting, pinning, etc. for each grid separately. The Hierarchical Grid support multiple child tables under a single parent record without sacrificing any of the performance the flat grid offers. Features like horizontal and vertical DOM virtualization, and paging are applicable to the Hierarchical Grid as a while, as well as to each individual flat grid inside the hierarchical schema of tables the grid is bound to. Samples displaying the Hierarchical Grid can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical_grid.html

One of the most requested features for the Data Grid has been an Excel-style filtering UI. We heard you, and we are delivering this feature with 7.2.0. This UI doesn’t replace the existing Row-style filtering UI that the Data Grid offers, and instead Excel Style filtering can be turned on instead of the current Row-style filtering. On top of that, the Excel-style filtering UI gives your end-users quick and easy way to end-users to interact with features like Column Moving, Sorting and Column Hiding. All of these UI bits are toggle-able, so you can tailor the UI configuration perfectly to the needs of your application, and ultimately your end-users. Samples displaying the Excel-style filtering UI can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel_style_filtering.html

Select

With 7.2.0, we have decided to complete the set of drop down components Ignite UI for Angular offers. So far, we had a simple Drop Down built on top of the generic Toggle component and the Overlay service the product offers. We also had the most advanced component, which is the Combo. We had quite a few user requests to fill the gap in between. We are now releasing a Select component, which is a form component that mimics the behavior of the native HTML select, but with a much more fluid UX, consistent with the rest of your application. We have strictly followed the Google Material guidelines for this component, and we have made it be as device agnostic, as the native HTML select is. Samples displaying the Select component can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/select.html

Autocomplete

The other drop down component that Ignite UI for Angular was missing is an Autocomplete. Version 7.2.0 features that as well. We have developed an Autocomplete directly, which allows developers to link an input component with a drop down component, and to control what the drop down displays based on the user input in the input field. Samples displaying the Autocomplete directive in action can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html

Date and Time picker enhancements

The Date and Time picker components in Ignite UI for Angular offered a pop out dialog picker views so far. With 7.2.0, you can now configure them to be editable input components with drop-down pickers respectively for date and time. Samples displaying the new modes for the Date and Time pickers can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html and https://www.infragistics.com/products/ignite-ui-angular/angular/components/time_picker.html

Calendar enhancements

In this release, we have made a few enhancement to the Calendar component, by separating its views into separate components. Now you will be able to instantiate a stand-alone month and year view, if your application needs are for end-users to fill only those portions of a date. Samples displaying the separate Calendar view components can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/month_picker.html

Outlined Button

The Ignite UI for Angular Button directive now includes an Outlined button type, which we were previously missing. Samples displaying the different Button types can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/button.html

Theming – Component elevations and roundness

The Ignite UI for Angular theming engine now allows you to change the elevation (shadows) and the roundness (border-radius) of individual Ignite UI for Angular components in your application, or the overall roundness factor of a theme applied across your application.

The full release notes for each version of Ignite UI for Angular are located here: https://github.com/IgniteUI/igniteui-angular/releases

An additional feature, which will be released within a couple of weeks, is the Multi Cell Selection, A.K.A Drag Selection, for the Data Grid components. We will keep you posted!

The first time I ever heard about design systems, I had to ask myself "How is it that nobody ever came up with this concept until now?". After using the Indigo.Design Sketch UI Kit, I realized that Indigo.Design not only essentially builds off the idea of a design system, but adds immense value to it.

Essentially, a UI Kit, as a fundamental design system tool, is developed to not only meet a specific product’s needs, but is based on the fundamental needs of a wider range of products. By testing the Indigo.Design UI Kit with various UX scenarios that can now be found on Dribbble, the Indigo.Design team has continuously proved that the design system offers various solutions for a broader spectrum of UX challenges when compared to a design system created for a single product.  

Before going through the steps of creating my debut dribbble shot with Indigo.Design, I want to reaffirm the pieces that the Indigo.Design system ties together:  

• UI Kits and Plugin* to speed up the creative process of designers in Sketch 
• Cloud services to share prototypes with stakeholders for rapid feedback or to create and execute in-depth remote usability studies with real users 
• Extension to integrate with Visual Studio Code that allows one to generate native Angular code from his/her prototypes supported by Ignite UI for Angular  

As for my own debut dribbble shot I went on to present a simple, yet tastefully laid out login page, including a few UI components and an image as a brand asset. To achieve this, I set off with the decision to divide my artboard in two equal parts: one for the image and another one for the signup form.  

Let’s go through the rest of the steps together. I will begin by placing all the components, such as headings, inputs for the user data, raised and flat buttons. For now, let's ignore the exact arrangement of the elements, I will just place them on the artboard. Through the various overrides that represent component variations and configuration options, like adding a prefix or suffix, changing the text content, and deciding whether to have some helper text or not, I can configure the inputs in the way I need them. 

It is a common design practice to prepare a draft paper sketch of the rough layout you intend to create. This helps one to think about the whole picture and plan his arsenal of components to use.  

Before arranging things pixel-perfect, let’s do one more thing and organize  components into meaningful groups, i.e. a group for the two inputs (username and password), the title “Hello, again, please sign in here”, as well as the “Sign in” and “Forgot password?” buttons. Next, I will configure the properties of the inputs by making sure they are of type border and setting their variant to dark and state to idle. 

The “Sign in” button is Raised with background color set to Primary 500, while for the “Forgot your password” I will be using a Flat button with text style set to Error. For the title text “Hello again, please sign in here”, I will be using H6 Headline styled in Active color, but you are totally free to pick another style and adjust the title according to your aesthetic preferences, only make sure that it is more subtle than the main slogan. Lastly, lets align all elements like on the image below and use a uniform vertical whitespace between them of 24 px.  

The big button labeled “Sign up here” in the bottom right corner let new users easily switch to the Signup page. This button consists of secondary color background layer, white line and text field, which I combined in a group. It is important that these three elements and the whole group to be pinned to the bottom and right edge as well as to have fixed vertical size. 

Next, I need to apply brand assets such as colors and typography to all components in the design. In fact, thanks to the new Theming functionality in the Indigo.Design plugin, such changes e.g. of the base typeface and individual typography font weights for all components, can be applied quickly and easily whenever necessary. I personally prefer to apply brand colors and edit the typography at once. After applying these, due to font differences in size and letterspacing, one may need to tweak the width of his/her text fields for example by adjusting the size of some components. 

One more thing, I need to adjust the image size and position, cropping it if necessary, and setting its resizing properties in Sketch like below. I was able to find a high quality image visually supporting my design on Unsplash upon which these adjustments were made. 

Lastly, I need to take care of the main slogan “Keep an eye on your budget”, so let’s give it a H1 or H2 Headline Primary style. 

That’s it! As you can see, I have followed a logical and systematic design process, with attention to which components are more important than others and striving to achieve an aesthetic composition of colors, typography and imagery to achieve a stunning result. 

*On February 12^th was published Theming functionality to Indigo.Design Sketch Plugin, which makes the design process even quicker and better organized. It lets users edit their color palette and typography with minimal effort for a fraction of the time it used to take before. 

So you want to write your first Angular application, however setting up even a ‘Hello World’ Angular application is not easy. It requires many steps such as:

• Setting up a TypeScript compiler, if you choose to use TypeScript
• Configuration of Webpack or other module loader
• Setting up local web development server
• Installing and configuring dependencies
• Configuring Unit Test environment
• Configuring End to End Test environment
• Working with Continuous Delivery
• Working with Continuous Integration and many more.

 You can perform all these tasks manually, but this will require a strong understanding of all these concepts and will make starting a new project very time consuming. To solve this problem, Angular comes with the Angular Command Line Interface (CLI).

Learn more about it here: https://cli.angular.io/

All these tasks are taken care of by Angular CLI, which is a command line tool for creating, testing, and deploying Angular apps. It is recommended to use Angular CLI for creating Angular apps, as you do not need to spend time installing and configuring all the required dependencies and wiring everything together. It provides you with many boilerplates and saves your time.

It uses Webpack to include all the packaging, the loading module, importing functionality, BrowserLink and more. The entire Webpack configuration is done completely by CLI so you don’t have to worry about it. It also configures Jasmine and Karma for unit tests and TypeScript complier to transpile TypeScript file to JavaScript etc.  Let us see how we can work with Angular CLI.

Installation of Angular CLI 

 You can install Angular CLI globally on a local development machine using npm. 

To work with npm, make sure to install NodeJS from here : https://nodejs.org/en/. Once NodeJS is installed, you can use npm to install Angular CLI. To find whether NodeJS is installed, run the command

  node –v

You should see the NodeJS version number returned.  Once NodeJS is installed, you need to make sure whether npm is installed or not. On Windows with nodeJS installer, npm will also be installed. However, you can use also use a command to install it:

 npm install -g npm

You can use –v alias to check the npm version installed:

 After that, do the following to install Angular CLI:

 npm install @angular/cli -g

 You have now installed Angular CLI globally.  To check whether Angular CLI is installed  run this command:

 ng –version

 You should see the versions of Angular CLI and other packages.  Once you see the version number as in the above image, you can be sure that Angular CLI is successfully installed on your system. Another way to find out that whether Angular CLI is installed globally  on the system is to run the npm list command :

 npm list -g @angular/cli --depth=0

The above command will return you the version of installed Angular CLI and you will be sure that Angular CLI is successfully installed on your machine.

Upgrade Angular CLI 

 Sometimes you may have to upgrade Angular CLI to the latest version. You can do that using a combination of these three commands:

 npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli

 Sometimes you may have to use –force to clean the cache.  

Getting help in Angular CLI

You can get help in Angular CLI using the help command:

 ng help

Angular will list all the help options available as shown in above image.  You can get help for a specific command by running:

ng [command name] –help

Creating First Application

Once you have Angular CLI installed, you can use its command to generate a new Angular project. You can create a new application using the ng new command:   

ng new helloworld --skip-install

Above we have created a new project called HelloWorld.  We selected the option not to install dependencies by using –skip-install. We will run npm install separately to install dependencies.  If you run below command, it will create project and install dependencies too.

ng new helloworld

 When you create new project using Angular CLI, it will ask you for two options

1. Whether you want to add routing to project
2. Which styling you want to choose like CSS, SCSS, and LESS etc.

 Either you can choose to add routing or not, also you can choose different ways of styling your application.  Once the application is created, you can open that in any code editor to work with it. These days, Visual Studio Code is very popular.  You can run scaffold application using following command:

 ng serve

As you see, the application compiled successfully, and by default runs on poet 4200. There are many options available with ng serve command. If you want to explore further, various options are available with ng new command, run it with help:

 ng new –help

As you see, it has one argument, which is name of the project, besides that are many options available.  For example,

ng new HelloWorld –dry-run

The above command will create files without writing anything in it.

 ng new HelloWorld –inline-template

The above command includes template inline in the component TS file.  There are even command options to use Angular new Ivy rendering.

 ng new HelloWorld  --experimental-ivy

There are many options available with ng new command, which you should be aware of.

Once you create new project with ng new command, you can open package.json file to explore various options and dependencies.

For example, you can change start, build, and test commands on the package.json file for this particular project.  In addition, you can find various project dependencies in the file.  Another important file, which contains configuration for Angular CLI, is angular.json file.

This file contains all configuration information related to Angular CLI for this particular project.  For example, let us consider prefix property.  By default, it is set to app. So, whenever you create a component, service etc., their name is prefixed with app.  As you notice in AppComponent.

 You may have a requirement to change prefix to your business need.  Let us say, you want prefix to be set to your company name, foo. You can configure Angular CLI to use foo as prefix instead of app in three ways

1. By manually changing angular.json file
2. By using –prefix option with ng new command
3. By using ng config for global setting

 I changed the value of prefix in angular.json and then ran the command to generate a login component.  As you see that now generated component has prefix foo used.

 If you do not want to change angular.json, at the time of running ng new you can use prefix option

 ng new helloword1 --prefix foo --skip-tests

In above command, we have combined two options. Angular CLI allows you to combine options to create project as you desire. In above command, we are saying create a new project with prefix set to foo and also do not create tests file (*.spec) file. As output, Angular CLI will create project and you will see foo is prefixed, as shown in the below image:

You can combine any number of options with ng new command to get desired configuration for newly created project.

Generate Commands

Angular CLI provides you ng generate command to generate various schematics.  For example, you can use

ng generate component login

The above command will generate a component called LoginComponent in the project. There are many options available with ng generate. You can list them with –help option.

ng generate –help

 As you see, it takes schematic as argument with various options possible. Available schematic arguments are as follows:

• appShell
• application
• class
• component
• directive
• enum
• guard
• interface
• library
• module
• pipe
• service
• serviceWorker
• universal

 Using generate command, you can generate a component or even can add a serviceWorker in your project to convert it to a Progressive Web App.

 ng generate serviceWorker

Generate Component

You can generate a new component using ng generate command. Below I am running generate command with dry option.

ng generate component products –dry

 We ran generate command with dry option to make sure that everything is correct.  You should run a command in dry mode to verify a command.  We can generate a component with below command:

ng generate component products

The above command will add a folder named products and the following files in the project:

1. component.ts
2. component.html
3. component.css

It has not added products.spec.ts. file because hellowworld1 project was created with –skip-tests option.  You can configure various options with ng generate component to decide whether template and style should be in external files or inline in the component class. You can check available options with –help command.

ng generate component –help

 As you see, different options available are:

• --change-detection
• --entry-component
• --export
• --flat
• --inline-style
• --inline-template
• --lint-fix
• --module
• --prefix
• --project
• --selector
• --skip-import
• --skip-tests
• --spec
• --style
• --styleext
• --view-encapsulation

 There are shortcuts available for these options also. You can read in detail about component generate options in help. Now let us say, you want to generate a component with view encapsulation and change detection preconfigured. That can be done by below command:

ng g c addproduct  --v ShadowDom --c OnPush

 Here, I have used the shortcut for command and options. We are configuring component to use Shadow Dom View Encapsulation and OnPush Change Detection. Generated component will look like below:

 You can combine many options to generate components as required by your project.

Generate Directive

You can generate directive with the following command:

ng generate directive creditcard

 The above command will generate a directive in the project as shown in the image below. Keep in mind that selector starts with foo instead of app because we have configured project to use prefix foo while creating it.

Like components, there are many options available with directive generate also. You can list them with –help

ng generate directive  --help

 Various options available with directive generation are:

• --export
• --flat
• --lint-fix
• --module
• --project
• --selector
• --skip-import
• --skip-tests
• --spec

You can use these options in various combinations to generate directives as required in your project.

Generate Service

The way you generate component and directive, you can generate

1. Service
2. Pipe
3. Interface
4. Class
5. Enum etc.

To generate service run command,

 ng generate service foodata

 The above command will create a service in the project.  You can explore

ng generate –help

To find other schematic options available.

Building and Serving  

 You can build an Angular application using ng build command,

ng build

As you see that ng build produces files to be downloaded in the browser. They are

• Main
• Polyfills
• Runtime
• Styles
• Vendor

There are many options available with ng build which you can list with –help command.

 ng build –help

 There are many options available, such as

• --aot
• --base-href
• --prod
• --deploy-url
• --output-hashing
• --source-map etc.

There are many options available those above-listed options. You can learn in detail in the help.

If you want to build and serve your application tracking the file changes, you should use ng serve command.  By default, it serves application on port 4200.

 ng serve

If you’ve done it successfully, you should see the Successfully Compiled message as shown above. In addition, it is saying that application is listening at port 4200.  You can list various options available with ng serve using –help command.

Summary

 In this article, we learned about Angular CLI and various command available with it. You should use Angular CLI for faster development of Angular applications.

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

WPF 2018 Volume 1 Service Release (Build 18.1.20181.411)

• PDF - Infragistics for WPF 2018 Volume 1
• Excel - Infragistics for WPF 2018 Volume 1

WPF 2018 Volume 2 Service Release (Build 18.2.20182.281)

• PDF - Infragistics for WPF 2018 Volume 2
• Excel - Infragistics for WPF 2018 Volume 2

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

Windows Forms 2018 Volume 1 Service Release (Build 18.1.20181.396)

• PDF - Infragistics for Windows Forms 2018 Volume 1
• Excel - Infragistics for Windows Forms 2018 Volume 1

Windows Forms 2018 Volume 2 Service Release (Build 18.2.20182.277)

• PDF - Infragistics for Windows Forms 2018 Volume 2
• Excel - Infragistics for Windows Forms 2018 Volume 2

Have you ever thought, what is type of undeclared variable in JavaScript? I know, the first thing that might come to mind is: how can an undeclared variable have a type? Yes, in JavaScript it is possible.

To understand it, let us start with understanding types in JavaScript. There are seven built in types in JavaScript. They are as follows:

1. null
2. undefined
3. boolean
4. number
5. string
6. object
7. symbol (added on ES6)

Each variable with assigned value has a type. Let us consider the code listed below:

var foo = 9;
console.log(typeof (foo)); // number
var koo;
console.log(typeof (koo)); // undefined
var too = 'Infragistics';
console.log(typeof (too)); // string

As you can see in the above snippet, if there is no value assigned then type of variable is undefined.  

So far so good, we saw that variable with no assigned value is undefined.  Let us consider the next code snippet:

var koo;
console.log(koo); // undefiend
console.log(typeof (koo)); // undefined

We have created a variable koo and have not assigned any value to it.  Now both value and type of koo are set to undefined.

Now that you understand type and value associated with undefined, let’s move on to null. In JavaScript, null is a primitive type.  However, type of null value is object. Consider code listed below:

var foo = null;
console.log(foo); // null
console.log(typeof (foo)); // object

You may consider it as a legacy bug that type of null value is object in JavaScript.

Finally, yet equally as important, in JavaScript a variable which is not declared also has a type. The declared variable type is undefined.

console.log(foo);// error foo is not defined
console.log(typeof (foo)); // undefined 

When you read the value of variable, which is  not declared, JavaScript will  return an error “not defined”, and will return its type as undefined

In addition, keep in mind that in world of JavaScript not defined is not the same as undefined.  I hope now you understand various primitive types in JavaScript.

In Angular, it is essential to know how components communicate with each other. If you use a component inside another component, they create a parent child relationship.  In such a scenario, parent and child components communicate to each other in following ways:

• @Input()
• @Output()
• Temp Ref Variable
• ViewChild and ContentChild

 You can learn in detail about @Input here  and @Output here. In this blog post, you will learn how data can be shared between components that are not related to each other using Angular Service.

To understand this using an example, create a service.  In the service, create a variable called count.  Service will share value of count variable across the components. Before we create count variable, let us talk about requirement again. We want all components to access last updated value of the data shared using the service. 

For this, we have to wrap the count variable in RxJS subjects. To be precise let us use BehaviorSubject.

We are using BehaviorSubject for the following reasons:

1. Data from the service should be multicasted. Each consumer component should access the same copy of the data. For this purpose, BehaviorSubject is used.
2. We are not using observables, as they are unicast in nature. Subscribers will have their own copy of data.
3. BehaviorSubject stores current value. Therefore, component will always read current value of data stored in BehaviorSubject.

Putting everything together, service to share simple data will look like next code listing:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable({
    providedIn: 'root'
})
export class AppService {
    counter = 1;
    count: BehaviorSubject<number>;
    constructor() {
 
        this.count = new BehaviorSubject(this.counter);
    }
 
    nextCount() {
        this.count.next(++this.counter);
    }
}

Now components can consume service to access shared data. For example, in a component, service can be consumed as shown in the next listing:

export class Appchild2Component implements OnInit {
 
    count: number;
    constructor(private appsevice: AppService) {
    }
    ngOnInit() {
 
        this.appsevice.count.subscribe(c => {
            this.count = c;
        });
    }
    nextCount() {
        this.appsevice.nextCount();
    }
}

We are subscribing to service and reading the value of count in the local variable. In addition, there is a function that  increments the count.  On the template, you can display and increment shared data as shown in the next code listing:

<h2>Count in component2  =  {{ count }}</h2><button (click)='nextCount()'>Next Count from component2</button>

In this way, you can consume service in as many components as possible and everywhere they will share the same data from the service. For your reference you can find working stackblitz here:

https://stackblitz.com/github/debugmodedotnet/componnetcommunicationwithservice

 In my opinion, this is the simplest way you can share data between unrelated components in Angular. I am sure there are better ways for more complex scenarios. Please suggest some ideas in the comments below if you know of other options.

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

ASP.NET 2018 Volume 1

• PDF (ASP.NET 2018 Volume 1, Build 18.1.20181.105)
• Excel (ASP.NET 2018 Volume 1, Build 18.1.20181.105)

ASP.NET 2018 Volume 2

• PDF (ASP.NET 2018 Volume 2, Build 18.2.20182.296)
• Excel (ASP.NET 2018 Volume 2, Build 18.2.20182.296)

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

Ignite UI 2018 Volume 1

• PDF (Ignite UI 2018 Volume 1, Build 18.1.20181.285)
• Excel (Ignite UI 2018 Volume 1, Build 18.1.20181.285)

Ignite UI 2018 Volume 2

• PDF (Ignite UI 2018 Volume 2, Build 18.2.20182.99)
• Excel (Ignite UI 2018 Volume 2, Build 18.2.20182.99)