New highlights in Angular 16

Angular 16 was released in early May. Here are the highlights of Angular 16.

Angular 16 was released in early May. Here are the highlights of Angular 16 .

New highlights in Angular 16 Picture 1 New highlights in Angular 16 Picture 1

Angular, developed by Google, is an open source framework widely used in web application development. It offers a powerful set of tools and a wide range of features, allowing you to create dynamic, responsive and scalable web apps.

Angular version 16 introduces exciting new content and improvements to the programming experience and ensures better application stability and performance.

Angular Signals

Angular Signals is a library, which allows to define react values and establish dependencies between them. This is a simple example of how to use Angular Signals in an Angular application.

@Component ({    selector: 'my-app',    standalone: true,    template: ` {{ fullName() }}  `, }) export class App {    firstName = signal('Jane');    lastName = signal('Doe');    fullName = computed(() => `${this.firstName()} ${this.lastName()}`);    constructor() {        effect(() => console.log('Name changed:', this.fullName()));    }    setName(newName: string) {        this.firstName.set(newName);    } }

The snippet code above generates a calculated value named fullName, based on the signals firstName and lastName. In addition, it defines an effect, a callback function that runs whenever the value of the signal it reads changes.

In this case, the fullName value depends on firstName and lastName, so changing one of them will trigger this effect. When the firstName value is set to John, the browser logs the following message to the console:

Name changed: John Doe.

Independent Ng New Collection

Starting from Angular v16, you can create new standalone projects from scratch! To try the developer standalone schematic preview, make sure you have Angular CLI v16 installed and run the following command:

ng new --standalone

By doing this, you will get a simpler project structure without the need for NgModules. Moreover, the entire generator in the project will give independent commands, elements and pipes!

Automatic Route Params mapping

Consider a routing configuration like this:

export const routes: Routes = [{    path: 'search:/id',    component: SearchComponent,    resolve: {        searchDetails: searchResolverFn    } }];

Before Angular 16, you needed to add the ActivatedRoute service to retrieve the URL parameters, query or related data for a specific URL.

Here is an example of how you would do this:

@Component({    . }) export class SearchComponent {    readonly #activatedRoute = inject(ActivatedRoute);    readonly id$ = this.#activatedRoute.paramMap(map(params => params.get('id')));    readonly data$ = this.#activatedRoute.data.map(({        searchDetails    }) => searchDetails); }

With Angular 16, you no longer need to add the ActivatedRoute service to retrieve the various routing parameters as you can bind them directly to the component input fields.

To enable this feature in an application that uses the module system, set the corresponding value in the RouterModule options:

RouterModule.forRoot(routes, {    bindComponentInputs: true })

For a standalone application, you need to call a function instead:

provideRoutes(routes, withComponentInputBinding());

After activating this function, the component becomes simpler:

@Component({    . }) export class SearchComponent {    @Input() id!: string;    @Input() searchDetails!: SearchDetails; }

Required input

A highly recommended feature for the Angular community is marking required input fields. Currently, you have to use different methods to achieve this, such as causing an error in the NgOnInit cycle if the variable is undefined or editing the element selector to include required input fields.

However, both of these solutions have their own pros and cons. Starting with version 16, creating a required input field is as simple as providing a configuration object in the input annotation's metadata:

@Input({    required: true }) name!: string;

Vite is a development server

Angular 14 introduces a new JavaScript package called EsBuild, which significantly improves build times by about 40%. However, you can only realize that change during the build phase, not development with server programming.

In the upcoming update of Angular, the Vite build tool allows the use of EsBuild throughout the development process.

To enable this feature, update the builder configuration in the angular.json file as follows:

"architect": {    "build": {        "builder": "@angular-devkit/build-angular:browser-esbuild",        "options": {            .        }    }

Note that this feature is still in beta.

AngularJS 16 has updated with cool features like Angular Singals for data management, standalone project creation, auto-mapping route params, required input, and Vite integration to improve the development process. These upgrades improve the programming experience and increase the performance of the application.