Angular 16 – Top 8 new must known features for Developers

As per the planned schedule, Google Angular Team release the new version of the most popular client-side framework i.e. Angular.  As per the scheduled six-month release plan of Angular, Google release the new version of Angular 16 on 3rd May 2023. As a developer, we are curious about the new version of the Angular. Because, as per the Angular Team, Angular 16 is one of the most significant releases compared to the earlier releases. In this version, Angular 16 is released with different types of impressive functionalities and features for all types of the users like developers, technical managers, and business owners. In this article, we will discuss the major features introduced in the Angular 16.

New Features Introduced in Angular 16

With the release of the Angular v16, the Angular framework is considered the most of the long waiting improvements asked by the developer community for a long time. This new version of the Angular framework addresses many quality improvements requested by the community members as a request. Also, we need to remember that while we are trying to use Angular 16, we need to use Node version 16 or 18 and also, and it required TypeScript 4.9.3 or above version for compilation purposes. Let's discuss the new features introduced in the Angular v16 release.

01. Reactivity Revamped

In Angular 16, one of the major feature releases is the introduction of a new reactivity model structure. With the help of these new features, it will help to improve the performance of the application and also the developer experience. Currently, this feature is released as a developer preview in the Angular 16 version. Also, these features will provide full support for any backward compatibility and interoperability in the existing application. Some of the key benefits of these features are –

• With the help of these features, the runtime performance of any Angular application will be improved much more due to the deduction of the change detection process computations mechanism with the framework.
• It brings a simple metal model structure for the reactivity, which help us to clear understanding of the dependencies of the view and related to the flow of the data within the application.
• Also, it enabled fine-grained reactivity which will be a part of the future release. Through this, it will measure the changes only if the components are affected due to that. 
• With this feature, in the future, Zone.js will become optional. In that case, it will use the signals to intimate the framework about the changing state of the model.
• Provides much better interoperability with RxJS with the help of introducing reactive inputs.

In Angular v16, we can use the new signal library packages which are the parts of @angular/core and also can use the RxJS interop package through @angular/core/rxjs-interop. The complete implementation of the signal integration in the Angular Framework will be released in the coming release.

02. Signals

In Angular 16, another major feature introduced is Signals. With these latest features, we can manage the state change mechanism within the Angular application. It is inspired by Solid.js. Signals are represented as a function that always returns a value with the help of the get() method and also, the same function can be updated by the new value with the help of set(). Also, we can define a signal as a dependent structure. So, whenever the value changes under the dependent elements, the automatically signal updates its value. Signal also supports the RxJS observables object which can be used in Angular 16-based applications to develop any powerful and declarative data sequence flow. In Angular 16, Signals or Angular Signals are released as developer previews.

A signal function is an object which accepts a value. Consumers who consume the signals can read the value and update the value if required. Also, if the value is changed due 
to any other way, then it also notified the same consumers. If any angular component is bound with the signal, then Angular automatically triggers the change detection whenever the signal got changed. 

In Angular 16, we can use the signal function by using the @angular/core package. This function mainly returns a so-called WritableSignal<T> object. Here T represents the managed value type.

03. Required Component Inputs

Required Component Inputs is one of the major features released in Angular 16. This feature improves the code quality along with the developer's experience in the angular application. With the help of this property, the developer can mark some input properties as mandatory while defining any component. So, when anyone is using that component within their application, they have to provide the values of that input. Otherwise, the framework will be thrown an error message related to this. It will help us to ensure the defined component always receives the necessary value during implementation.  The below code block demonstrates how we can use this Input param under the angular component.

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-message',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.message.component.html',
})
export class AppMessageComponent {
    @Input({required:true}) message = '';
}

04. Ngcc or Angular Compatibility Compiler Remove

In the past, with the release of Angular 9, the Angular team implemented the new view engine called Ivy related to the compilation related to the next-generation rendering pipeline. At that time, ngcc has been introduced to support the libraries which are based on the old view engine. In the latest Angular 16 version, the ngcc and all related code blocks related to the old view-engine have been removed to reduce the application bundle size. So, the old engine can not be used in Angular 16 onwards. So, now, we can say that the Angular framework completely transferred to Ivy.  

05. Server Side Rendering and Hydration

In the case of a SPA (Single Page Application) based application, one of the key factors is always improved runtime performance. But, at the time of initial page load, normally it takes fewer seconds extra compared to the classic web-based application. And it is because, at the time of initial page load, it always loads a large volume of JavaScript Code along with HTML and CSS. But, for some type of applications like Web Portal or shipping-based applications, this extra time at the initial loading always cause a problem for the companies. For such cases, one simple solution is to use the server-side rendering technique so that the server always can deliver the finished HTML page and it will load on the browser very quickly. 

Angular provides this support from the beginning. But the behavior of it is not so good. Because, when the JavaScript-based code is loaded then it re-renders the entire page and at that time, all server-side markup has been replaced by the client-side rendering markup. In Angular 16, the Angular team addresses this issue and solves this problem by reusing the already server-side rendered markup at the time of loading JavaScript bundles into the browser. So, in Angular 16, this becomes one of the major features that developer preview of Full Application based Non-Destructive Hydration. For this improvement, the Angular team worked with the Chrome Aurora Team related to improve performance for hydration and server-side rendering. Hydration functionality-related support is already provided by the other client-side framework like React and Next.js. 

So, now, Agular 16, provides support for hydration out-of-the-box, and with the help of this, SSR-based applications will be much smoother and faster. With this, it will reduce the duration of time-to-interactive (TTI) and also provides improved support for SEO and accessibility. 
To use the Server-side rendering in any application, need to install the @nguniversal/express-engine package first. After the package is installed, we can enable the non-destructive hydration with the help of Standalone API provideClientHydration.

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(),
  ]
};

06. Bind Route Param into Component Inputs Directly

In Angular 16, the developer will get a new experience while defining the Route param in any application. Now, developers can define the route config in such a way that the route parameters can be directly bound with the input parameters of the defined component of the route. So, for now, we do not need to use the ActivatedRoute to retrieve those values into the component as the router param value can be assigned directly to the component inputs. This feature will help us to remove lots of boiler code in the application. Now, we can assign the below values within a routing component as input params –

• Route data – can use resolvers and data properties as earlier.
• Path parameters
• Query Parameters.

const routes = [
  {
    path: 'contact-info',
    loadComponent: import('./contactDetails'),
    resolve: { contactId: () => fetchContact() }
  }
];

@Component(
  selector: 'contact-info',
  ......
)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}

07. DestroyRef Introduced in Lifecycle

In Angular 16, two new rxjs-based operators or provider called DestroyRef and takeUntilDestroyer has been introduced into the lifecycle hook.  These two methods are introduced as replacements for the ngOnDestroy lifecycle hook. By using the DestroyRef provider, we can register the destroy call back for any specific lifecycle scope. This provider can be used anywhere in the Angular Application like components, directives, embedded views, services, pipes, etc. 

import { Injectable, DestroyRef } from '@angular/core';

@Injectable(
  ...
)

export class AppService {
  destroyRef = inject(DestroyRef);

  destroy() {
    this.destroyRef.onDestroy(() => /* code for cleanup */ );
  }
}

The other provider takeUntilDestroyed needs to be used in the constructor. For using this, we need to pass the destroyRef as an argument within this operation for using this from outside of the constructor. With the help of this new operator, we can clean up the signal effects automatically. We do not need to perform any manual cleanup like a clear subscription in rxjs.

08. ES Build Dev Server Support

In earlier versions of Angular, ESBuild support is already available during the use ng build command for build purposes. Now, in Angular 16, the angular team provides support for the ESBuild for ng serve command as well. This new bundler provides a faster and smaller bundle time compared to the previous (as per the experiment, bundle time is reduced by nearly 40% compared to earlier). But still, this new feature can only be used during the build of the application, not during the development time. Probably, in the coming Angular releases, it will be a part of the development server during the development process.

To enable this we need to change “@angular-devkit/build-angular:browser” to “@angular-devkit/build-angular:browser-esbuild”.

Other Features of Angular 16

In the above section, we discussed the major 8 key features introduced into the Angular 16 version. Besides these key features, some other features are released along with Angular 16. Some of the areas –

• Provides improved dependency injection along with Debugging APIs.
• Provide Improved documentation and schematics details related to Standalone Components.
• Provide support for CSS isolation, which prevents conflicts between the component styles and the application styles. 
• It provides much-improved security in case of Cross-Site Scripting attacks. Now, Angular 16 supports native Trusted Types. With the help of this, browsers enforce strict rules for the use of any sensitive context within the application.
• In Angular Material, a new Date Range picker component is introduced along with Angular 16. This date range control provides selection features for both the start date and end date.
• Now, every Angular component is supported by self-closing tags.

Conclusion

There is no doubt that with Angular 16, there are lots of new features have been introduced. Probably, some of the features are still in the initial or developer preview mode. But instead of that, this new feature will change the code and application structure using Angular Framework. It also, helps us to reduce the existing boilerplate code related to the optimization of the application. This article will give you an overview of the new features of Angular 16. In the coming weeks, I will publish some more articles related to this new feature with step-by-step instructions. So, anybody can use this feature in their application. Related to this article, any queries or suggestions are always welcome.