What's New in the Angular 6 Updates

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

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

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

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

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

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

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

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

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

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

 

Architecture Overview

 

Angular Elements:

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

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

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

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

The Practicality of Building a Native Angular Application:

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

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

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

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

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

Virtualization and the Upcoming Renderer:

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

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

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

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

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

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

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

Grid and Component Highlights

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

Data Grid

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

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

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

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

Financial Chart

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

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

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

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

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

Category Chart

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

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

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

Looking Forward to Angular 7

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

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

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