What's new in Angular 14

Angular is launching version 14, which is already a tradition in its ecosystem as a new version is released every six months with enhancements, updates, and new features to develop more powerful applications.

This should not affect other Angular projects. Remember - "Angular". It doesn't matter which version you're using, the important thing is that you're using Angular. Every year you get a new version of Ubuntu, update your mobile phone, or every eight months NodeJS publishes a new version.

Typed Angular Forms

This feature is my favorite. For me, one of the best things about Angular is forms (forms), because they are the ones that are used daily.

What is the most common way we receive data from our users? These are forms, and they can be both simple and complex, and Angular's forms API is just great.

But what's new in this version? The novelty lies in the fact that now the forms will support typing, how is it? Let's remember that the fact that TypeScript uses typing has already reduced bugs in our systems by 15%, and Angular hasn't typed forms yet.

Now in the new version of the Angular Forms API, it can infer the type you specify and warn that, for example, a field that was defined as a number cannot be changed to a string or boolean value, and also changed to an array, because this will lead to inappropriate behavior in your code, which will lead to errors.

New primitives in Angular CDK

Angular has a UI package that you can use in your applications. Angular Material and Angular CDK are kits that provide ready-made tools in order not to create everything from scratch.

What if you want to make a modal or dialog screen? Of course, it can be built from scratch, but Angular already gives you that in a package where best practices, including accessibility, give you the tools to create such components.

At the same time, this version contains enhancements to the Angular CDK with new components that are independent of the visual style you want to implement.

Optimized page title access

When creating applications based on a framework and then distributing them to millions of users, one of the most important points is the need to take into account the needs of customers of all categories. This implies a new challenge - to make our solutions available to everyone.

Angular is constantly publishing new features, so we already have these best practices by default when developing it, and this version can work with page titles from the route definition.

Standalone Components

This is one of the most important issues that the community is talking about the most. It's about developing applications without the need for modules.

One of the goals of Angular is to minimize the learning curve for newbies learning the framework, and modules are one of those things that are hard to get right at the start. So now Angular offers a way we can develop without using it.

Imagine this: you have a component, and as a general rule, every Angular artifact: services, pipes, directives, and components should belong to a module. Now no, each component can be independent, import the context it needs and that's it.

However, Angular clarifies that it is releasing the first version of Standalone Components (Standalone Components), but this is preliminary and may change in the future.

If this feature will support this architecture from the very beginning, but at the same time reduce the learning curve, then this looks like a well-founded concept for the further work of the team.

Also, Angular is backward compatible, meaning this new way is optional; if you want to keep working with modules, you can continue to do so, or even have hybrids of modules and Standalone Components. However, it is still too early to conclude and we will see how things go.

Advanced Developer Diagnostics

This is one of those features that you can only use when upgrading and nothing else. Angular, being heavy on typing, can take advantage of IDEs that others can't, and has a lot of development experience.

One element of this is a plugin for VSCode called the Angular Language service, which, when installed, is like pair programming, constantly checking and suggesting where you might be making a mistake.