Angular 14 Version Release Date And New Features

So here we are, Angular 14 is going to release soon. It is expected in June.

Angular 14 is the next major update after Angular v13 was released in November 2021.

The use of modules will be optional in favor of stand-alone components.

What is the release date of Angular 14?

The release of Angular 14 is expected in June. Angular 14 is currently in release candidate 0.

How to install Angular 14

At this time, Angular 14 could be installed via npm using the next flag.

Simply open a new command line interface and run the following command to install the latest version of Angular:

npm install --global @angular/cli@next

This will install the latest version of Angular CLI globally on your development machine.

Features of Angular 14

Here is the list of Major features in Angular 14.

Interesting pattern using inject() instead of constructor injection!

remove constructor
better DX
removes need to pass all the deps to base class manually with super(dep1, ...) when using inheritance

⚠️ only works in constructor time!

But won't work in #angular component life-cycle hooks like ngOnInit or ngOnChange because they happen AFTER constructor time 😉

// define reusable helper function...
function select(selector: MemoizedSelector) {
    const store = inject(Store);
    return store.select(selector);
    // ...simplify your container (and other) components
    @Component({
        selector: 'my-org-some-feature-container',
        template: '...'
    })
    export class SomeFeatureContainer implements OnInit {
        @Input() someParam: string;
        view$ = select(someFeatureView);
        user$: Observable < user > ; //✅works
        constructor() {
            this.view$ = select(someFeatureView); //✅works
        }
        ngOnInit() {
            // ngonInit happens during runtime                          //   ⚠️  does NOT work
            this.user$ = select(userSelectorFactory(this.someParam));
        }
    }

1. Angular CLI auto completion

Angular 14 adds a new functionality to the CLI that allows real-time type ahead auto completion in the terminal. This capability can be accessed using the cli.

2. Angular 14 standalone components

With the release of Angular 14, standalone components will, at last, be a feasible option, and Angular modules will no longer be required.

A standalone component is not declared in any existing NgModule, and it directly manages its own dependencies (instead of having them managed by an NgModule), and can be depended upon directly, without the need for an intermediate NgModule.

The standalone flag is used to mark the component as “standalone”.

It is a property of a metadata object of the decorator @Component.

Adding the standalone flag is a signal that components are independently usable.

Such components don’t depend on any “intermediate context” of a NgModule.

import {Component} from '@angular/core';
@Component({
  standalone: true, 
  template: `I'm a standalone component!`
})
export class HelloStandaloneComponent {}

3. Enhanced template diagnostics in compiler

Enhanced template diagnostics are one of the new features introduced with Angular 14, making it possible for the compiler to shield developers from common coding errors in a manner similar to typescript.

Currently, the compiler doesn’t really have any warnings, and only ever fails for fatal issues that directly prevent compilation (with some minor exceptions).

These extended diagnostics will allow warnings to be easily authored to check for smaller mistakes like getting two-way binding syntax backwards ([foo])=“bar” or having extraneous operators like using foo ?? ‘bar’ when foo is not nullable.

The Proposed solution includes a new private flag in the compiler which enables “extended template diagnostic” feature.

And checks that give warning/information diagnostics about user templates which aren’t strictly fatal errors.

This issue is mostly about building the required infrastructure, but we should include one or two simple checks to validate the system.

4. Strictly Typed Reactive Forms feature

The most common request for an Angular feature on GitHub is for strictly typed forms, which, would improve the framework’s model-driven approach to the process of dealing with forms.

Consider the below example.

type User = {
    name: string;
    phoneNumber: Number;
}

We can represent the above User type in reactive form as shown below.

const userForm = new FormGroup({
    name: new FormControl(''),
    phoneNumber: new FormArray(0))
});

Let’s read the form values.

const userDetails = userForm.getRawValue();

The type any is very unsafe. We can change the property type easily.The above userDetails will have any type.

const name = userForm.get('name')!.value; // type `any`
userForm.controls.name.setValue(123456);  // We can do this.

But with the strongly typed reactive forms, the user details will have User type.But with name should be string, as it has any type we can assign numeric values as well.

Conclusion

So here we discussed some of the new feature which is coming with Angular 14, once it releases let's implement and see how exciting these features are.