What is new with Angular 14: 9+ features
One of Google’s outstanding development tools is Angular, a typescript-based web application framework for building client-side enterprise mobile and web apps. It has been upgraded to Angular 14, its most recent version.
In this article, we’ll go over what Angular 14 includes in terms of upgrades and features. Let’s get started with the new features built into Angular 14.
What comes new in Angular 14?
Let’s have a look at what the Angular 14 release has in store for us:
#1 Standalone components
The Angular development process will be much easier with Standalone Components. Standalone components do nothing more than simplify the building of Angular apps by removing the need for NgModules.
Standalone components are in developer preview in Angular 14 but they ready to be utilised in your apps for experimental.
You can now create an angular 14 component that belongs to no module by simply using the standalone property in the component’s decorator.
#2 Typed reactive forms
Angular 14 resolves the leading GitHub issue for Angular, which aims to provide strict type for the angular reactive forms.
Typed forms ensure that the contents included within form controls, groups, and arrays are type-safe over the whole API surface. This makes forms safer, particularly for heavily nested complicated situations.
Angular community participants including Sonu Kapoor, Netanel Basel, and Cédric Exbrayat contributed to the prototype, development, and testing of this feature, which was created based on public requests for feedback and design reviews.
#3 Streamlined accessibility of page title
Another advised best practice is to ensure that the page titles of your application are convied in a distinct manner.
The new Route.title property in Angular Router v13.2 simplifies this process. Adding a title does not necessitate any additional imports and is strongly typed.
#4 “Banana in a Box” Error
In two-way binding, it is a typical syntactic error for developers to reverse the brackets and parentheses, writing ([]) instead of [()].
In the v13.2 release, explicit error messages and instructions on how to fix the issue were added to the CLI and code editor.
#5 Raise Nullish Coalescing on Non-nullable Properties Error
Extended diagnostics also provide errors for nullish coalescing operators in Angular templates i.e the ?? operator. Basically, this error occurs when the argument is not “nullable,” meaning its type does not include null or undefined.
#6 Bind to protected members of components
You may now bind protected component members straight from your templates in Angular.
This grants you greater control over the public API exposed by your reusable components.
#7 Angular CLI auto completion
Angular 14 includes real-time auto-completion for commands like ng serve. Every time you see an error at the command line, typos are the primary cause. Fortunately, Angular 14 has added new ng completion and real-time type-ahead autocompletion to address this issue.
#8 CommonModule directives and pipes will be standalone
Angular team is also working on making CommonModule directives and pipes as standalone. 👇
#9 Passing Injectors in embedded views
You can pass in an injector when creating an embedded view through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView
- Customize DI behavior in the template
- Enable cleaner APIs for authoring reusable components and component primitives in CDK
Pass in an injector when creating an embedded view through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView! #ngUpdate
— Angular (@angular) June 20, 2022
- customize DI behavior in the template
- enable cleaner APIs for authoring reusable components and component primitives in CDK pic.twitter.com/GvVjd7EcRH
#10 A new way to inject services
Angular 14 Inject() provides a new way for how we use services.
Here is one example how we can wrap HttpClient.get into a reusable function. No constructor needed anymore for a simple get request 👏
#Angular 14 Inject() will be a game changer for how we use services. 🤩 So many ideas what we could do with it.
— Chris Kohler (@KohlerChristian) May 19, 2022
Here is one example how we can wrap HttpClient.get into a reusable function. No constructor needed anymore for a simple get request 👏 pic.twitter.com/plQ7fNxbKB
Conclusion
Angular, a web application framework built on typescript, is one of Google’s finest projects. It has launched its most recent version, Angular 14. Here, we discussed the upgrades and new features that Angular 14 has provided to Angular developers.
Standalone components are the most notable feature! However, it is possible that the API may not be stable and will be subject to future changes so be ceareful when using in production or better yet simply experiement with standalone components at this phase without using their in your production apps.