Angular 14 : New Features and Updates

Finally, Angular v14 is here! The Angular community launched the all-new Angular 14 on 02 June 2022. From going to 100% Ivy in the former release of Angular 13 to the addition of new primitives in the Angular Component dev kit (CDK), this is how the advancements get introduced with the release of Angular 14.

This release also includes many features and bug fixes that are contributed directly by the community members. Removal of IE11 support, typescript version update to 4.4, changes in the Angular Package Format, were some of the notable changes in the Angular 13 version. Let's see what Angular 14 has to offer!

Let’s have a look at the key highlights and important advancements in Angular 14:

Angular 14 Features

1. Angular gets simplified with Standalone Components

This is one of the major advancements that can be seen with the release of Angular 14. With the addition of standalone components, the process of writing Angular Apps becomes much simpler and easier than before.

Standalone components eliminate the need of using NgModules, and we can now get the developer preview of a new way of writing components, one without the NgModule i.e Standalone Components.

For now, this feature is available in the developer preview, meaning that it might change later until it becomes fully stable. This change could majorly alter the process of writing Angular Apps in the future.

2. Typed Forms

When it comes to Angular, there are two distinctive approaches for handling the forms. They can be either created by the template-driven approach or by using the reactive approach.

This newly introduced feature of Typed Forms is only applicable to reactive forms. The values inside form controls, groups, and arrays are type safe. It improves the overall “ type” safety of the applications developed using Angular.

The updated schematics enable progressive migration to Typed forms, allowing you to gradually add typing to your existing forms.

3. Streamlined Page Title accessibility

While developing apps your page title distinctively represents the content of your page. In the previous release of Angular 13, the process of adding title was streamlined with the new Route.title property in the Angular Router.

Now with Angular 14, there are no more additional imports required when adding a title to your page.

4. New primitives in the Angular CDK

The Component Dev Kit (CDK) from Angular provides a comprehensive set of tools for creating Angular components. The CDK Menu and Dialog have now been promoted to stable version in Angular 14!

The addition of new CDK primitives in Angular 14 allows for the creation of more accessible custom components.

Some additional Angular 14 features

1. Angular DevTools is now available offline

The Angular DevTools debugging extension can now be used in offline mode as well. Firefox users can find the extension under Mozilla's Add-ons for Firefox users.

2. Angular CLI enhancements

Angular 14 has got an amazing feature of autocomplete! Typos are bound to often while typing your code, resulting in command-line errors. To fix this, ng completion in version 14 now includes real-time type-ahead autocompletion!

Detailed analytics information using the ng analytics and improved ways to control the cache information using the ng cache are some of the additional features.

3. Optional injectors

When building an embedded view using the Angular 14 version, you may now specify an optional injector through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView.

4. Built-in improvements

Angular 14 adds support for TypeScript 4.7 and now targets ES2020 by default, allowing the CLI to deploy smaller code without downgrading.

Another noteworthy Angular 14 feature is that you can now link to protected component members directly from your templates. This offers more control over the public API surface of the reusable components.

5. Extended developer diagnostics

This new Angular 14 feature provides an extendable framework that enables better insights into your templates and provides suggestions for possible improvements in them.

How to upgrade

To avail of the benefits of Angular 14 features, developers can run ng update in their projects.

ng update @angular/cli @angular/core

Or you can refer to update.angular.io for further guidance and instructions regarding the installation of Angular 14.

To wrap up,

These were the noteworthy changes in the latest version of Angular 14.

The Angular developer community strives to make sure that web developers get better versions of the framework allowing them to stay updated with the rest of the online ecosystem and users' needs.

Now, that you’re aware of the key features and upgrades, it’s time to shift to Angular 14!

Read More: Angular 13: Top New Features And Updates