Technology Blog

Look deep into latest news and innovations happening in the Tech industry with our highly informational blog.

What’s new in Angular 14


The latest update Angular 14 was released last week. From typed forms and standalone components to new primitives in the Angular CDK (component dev kit), you will see here how each feature makes Angular more powerful.

Since the last release, it has completed two major requests for comments (RFC), which provided an opportunity for the entire Angular community to provide design feedback on proposed changes. As a result, our Strictly Typed Reactive Forms RFC closed our #1 GitHub issue, and our Standalone APIs RFC introduced a simpler way to author Angular apps.

In addition, this release includes many features and bug fixes directly contributed by community members, from adding router strong typing to more tree-shakable error messages.

Simplifying Angular with Standalone Components

Angular standalone components aim to streamline the authoring of Angular applications by reducing the need for NgModules. In v14, standalone components are in developer preview. They are ready to be used in your applications for exploration and development, but are not a stable API and will potentially change outside our typical model of backwards compatibility.

With standalone components, directives and pipes, the standalone: true flag allows you to add imports directly in your @Component() without an @NgModule().

In developer preview, utilize open source to ensure standalone is fully prepared to be released as a stable API. Add your first standalone component with ng generate component <name> –standalone, then head to our GitHub repository to provide feedback as you begin to explore.

Typed Angular Forms

Pic courtesy:

Angular v14 closes Angular’s top GitHub issue: implementing strict typing for the Angular Reactive Forms package.

Typed forms ensure that the values inside of form controls, groups, and arrays are type safe across the entire API surface. This enables safer forms, especially for deeply nested complex cases.

Update schematics allows for incremental migration to typed forms, so you can gradually add typing to your existing forms with full backwards compatibility. ng update will replace all form classes with untyped versions (for example, FormGroup -> UntypedFormGroup). You can then enable types at your own pace (for example, UntypedFormGroup -> FormGroup).

Extended developer diagnostics

Pic courtesy:

New extended diagnostics provide an extendable framework that gives you more insight into your templates and how you might be able to improve them. Diagnostics give compile-time warnings with precise, actionable suggestions for your templates, catching bugs before run-time.

More built-in improvements

v14 includes support for the latest TypeScript 4.7 release and now targets ES2020 by default, which allows the CLI to ship smaller code without downleveling.

In addition, there are three more featurettes we want to highlight:

Bind to protected component members

In v14, you can now bind to protected component members directly from your templates, thanks to a contribution from Zack Elliott!

This gives you more control over the public API surface of your reusable components.

Optional injectors in Embedded Views

v14 adds support for passing in an optional injector when creating an embedded view through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView. The injector allows for the dependency injection behavior to be customized within the specific template.

This enables cleaner APIs for authoring reusable components and for component primitives in Angular CDK.

NgModel OnPush

And finally, a community contribution by Artur Androsovych closes a top issue and ensures that NgModel changes are reflected in the UI for OnPush components.

Built-in primitives and tooling

CDK and tooling improvements supply the building blocks for a stronger development environment, from CDK menu primitives to CLI auto-completion.

New primitives in the Angular CDK

Pic courtesy:

Angular’s Component Dev Kit provides a whole suite of tools for building Angular components. In v14, we’re promoting the CDK Menu and Dialog to stable!

This release includes new CDK primitives that can be used to create more accessible custom components based on the WAI-ARIA menu and menubar design patterns.

hasHarness and getHarnessOrNull in Component Test Harnesses

v14 includes new methods for HarnessLoader to check if a harness is present, and to return the harness instance if present. Component Test Harnesses continue to provide a flexible way to write better tests for your components.

Angular CLI enhancements

Standardized CLI argument parsing means more consistency across the entire Angular CLI, and now every flag uses –lower-skewer-case format.

Curious what this means? Run ng –help for cleaner output that explains your options.

ng completion

Accidentally typing ng sevre instead of ng serve happens all the time. Typos are one of the most common reasons a command line prompt throws an error. To solve this, v14’s new ng completion introduces real-time type-ahead autocompletion!

Pic courtesy:

To ensure all Angular developers know about this, the CLI will prompt you to opt-in to autocomplete during your first command execution in v14. You can also manually run ng completion and the CLI will automatically set this up for you.

ng analytics

Pic courtesy:

The CLI’s analytics command allows you to control analytics settings and print analytics information. More detailed output clearly communicates your analytics configurations, and provides our team with telemetry data to inform our project prioritization. It sincerely helps a lot when you turn it on!

ng cache

Pic courtesy:

ng cache provides a way to control and print cache information from the command line. You can enable, disable, or delete from disk, and print statistics and information.

Angular DevTools is available offline and in Firefox

Pic courtesy:

The Angular DevTools debugging extension now supports offline use, thanks to a community contribution by Keith Li. For Firefox users, find the extension in the Add-ons for Mozilla.

Experimental ESM Application Builds

Finally, v14 introduces an experimental esbuild-based build system for ng build, which compiles pure ESM output.

For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – or Skype us: “hkinfosoft”.

To develop your custom web app using Angular, please visit our technology page.

Content Source: