Unveiling Angular 16: A Paradigm Shift in Front-End Development

Hardik Thakker

Founder & CEO

Published On: May 11, 2023

Angular v16 has arrived, bringing with it a host of new features and enhancements that will excite developers and tech enthusiasts alike.

Angular is a popular open-source framework for building web applications, and version 16 signifies a major update or release in the framework’s development. It promises to unlock the framework’s full potential, empowering developers to create impressive web applications that leave a lasting impact.

Here, you’ll discover the key improvements and optimizations that make Angular v16 a must-have for web application development.

Key Takeaways

What is Angular?

Angular is a popular open-source web development framework created by Google. It is used for building dynamic, single-page applications (SPAs) and is based on the Model-View-Controller (MVC) architectural pattern.

Angular provides a comprehensive set of tools and features that simplify the development process and enhance the overall efficiency of web applications. It utilizes HTML as a template language and extends it with additional syntax and directives to create interactive user interfaces.

Key features of Angular include data binding, which allows for automatic synchronization between the model and the view; dependency injection, which facilitates efficient management of components and their dependencies; and routing, which enables navigation between different views and sections of an application.

New Upgrades of Angular 16

It’s time to highlight the essential features of Angular 16.

1. Brand New Reactivity Model For Angular

   We are excited to announce that with the Angular version 16 release, a developer preview of an innovative reactivity model for Angular is a hot topic. This model brings significant improvements to performance and the overall experience for Angular developers.

   The new model is fully backward compatible and interoperable with the current system. It offers the following benefits:

   • By minimizing the number of computations during change detection, you’ll find significantly enhanced runtime performance. As we progress with the implementation of Angular Signals, the developers working with Angular development company will experience a notable enhancement in the INP Core Web Vital metric for applications developed with signals.
   • Angular 16 comes up with a simpler mental model for reactivity, clarifying the dependencies of the view and the flow of data throughout the Angular web application development.
   • Fine-grained reactivity (fine-grained code loading) is the new feature of Angular 16 that enables precise reactivity, enabling upcoming releases to detect changes exclusively in the relevant standalone components.
   • Makes Zone.js optional in upcoming releases by utilizing signals to notify the framework when the model has changed.
   • Provides computed properties without the need for recomputation in every change detection cycle.
   • To improve interoperability with RxJS, we have devised a plan to introduce reactive inputs, thereby enhancing the compatibility between Angular and RxJS.

   In v16, you’ll find a new signals library as part of @angular/core, along with an RxJS interop package called @angular/core/rxjs-interop.. The complete integration of signals into the framework is planned for later this year.

2. Introducing Angular Signals

   Signals, which draw inspiration from Solid.js, introduce a fresh approach to managing state modifications within Angular standalone apps. In this paradigm, signals take the form of functions that can be modified by invoking them with a new value (set()), while also returning a value (get()).

   In addition, Angular signals library can establish dependencies on each other, forming a dynamic value graph that automatically updates whenever a dependency undergoes a change.

   The Angular Signals package enables developers to define reactive primitive values and establish communication dependencies between them. As part of Angular 16, developers will have the convenience of easily converting signals to observables using the @angular/core/rxjs-interop. This feature is currently available in the developer preview.

   Angular v16 continues to support RxJS observables, which can be combined with signals to create powerful and flexible data flows, allowing for the construction of resilient and expressive systems.

   Here’s a simple example how to use it with Angular 16:

   Copy

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

   The code segment presented generates a computed value called “fullName” that relies on the signals “firstName” and “lastName”. Additionally, we define an effect that triggers a callback each time any of the signals it utilizes are altered. In this scenario, the “fullName” signal is indirectly dependent on “firstName” and “lastName”.

   If we modify the value of “firstName” to “David”, the console in the browser will display a log.
   “Name changed: Mr Angular David”

3. Improved Server-Side Rendering with Enhanced Speed

   The Angular team has identified server-side rendering as the primary area for enhancing Angular.

   With the introduction of the new app non-destructive hydration technique called “whole app non-destructive or partial hydration,” the application no longer requires a complete re-rendering by Angular.

   Rather than starting from scratch, the Angular framework leverages existing DOM nodes for building internal data structures and binds event listeners to those nodes.

   Angular developers can take advantage of various benefits, including:

   • Elimination of content flickering on web pages, resulting in a smoother user experience.
   • Enhanced Web Core Vitals, improving metrics related to page load speed and user interaction.
   • Future-proof architecture that employs primitives, enabling precise code loading. This capability is currently evident in progressive lazy route hydration.
   • Simple integration with existing apps requiring only a few lines of code.
   • Gradual adoption of hydration for components that perform manual DOM manipulation through the use of the ngSkipHydration property in templates.
   • Angular has observed up to a 45% improvement in Largest Contentful Paint (LCP) with full standalone app hydration.

   Several applications have already implemented hydration in their production environments and have reported improvements in Core Web Vitals (CWV).

   To begin, a few additional lines need to be added to your main.ts file in order to get started.

   Copy

   import {
   bootstrapApplication,
   provideClientHydration,
   } from '@angular/platform-browser';
   ...
   bootstrapApplication(RootCmp, {
   providers: [provideClientHydration()]
   });
   

   Another notable enhancement in Angular 16 is the inclusion of non-destructive hydration support, which enhances the speed and smoothness of server-side rendering (SSR).

   This technique allows you to add server-side rendering of your application on the server and transmitting the HTML content to the browser. Subsequently, JavaScript behavior and event listeners are attached to transform the page into a fully interactive and functional web page.

   Angular 16 introduces a built-in feature called Server Side Rendering (SSR), which significantly enhances the performance and quality of SSR applications.

   This feature provides several advantages, such as improved SEO, accessibility, and reduced time-to-interactive (TTI). While SSR has been a long-standing feature in frameworks like React or Next.js, implementing it in Angular posed its own set of challenges.

   During the hydration process, the browser employs a non-destructive technique that ensures existing HTML content and attributes remain untouched and unaffected.

   This means that any modifications or optimizations made to the HTML content on the server side are preserved.

   Moreover, non-destructive hydration serves as a safeguard against potential conflicts or errors arising from inconsistencies between the HTML content on the client and server sides.

4. In Angular 16, the elimination of ngcc is observed

   Angular made a significant change in version 9 by transitioning from its previous view engine to Ivy. To facilitate the support of libraries that still relied on the older view engine, the Angular Compatibility Compiler (ngcc) was introduced.

   However, starting from version 16, ngcc has been removed, along with all other view engine-related code. Consequently, Angular View Engine libraries cannot be used in v16 and beyond, and the Angular bundle size should be reduced.

   Although this represents a compatibility break, it is important to note that these libraries were not officially supported.
   Required Inputs
   Prior to Angular 16, it was not feasible to designate inputs as mandatory, which was a highly anticipated feature. However, a widely used workaround involved employing a component selector.

   Copy

   @Component({
    selector: 'app-test-component[title]', // note attribute selector here
    template: '{{ title }}',
   })
   export class TestComponent {
    @Input()
    title!: string;
   }
   

   Regrettably, this approach falls short of being optimal. Firstly, it leads to cluttering of the component selector. Each required input name must be included in the selector, which poses difficulties, particularly during refactoring processes.

   Furthermore, it disrupts the functionality of auto-import mechanisms in Integrated Development Environments (IDEs). Secondly, if we overlook providing a value for an input labeled in this manner, the resulting error message lacks precision, as there is no exact match for such an “incomplete” selector.

   

   The newly introduced feature addresses this issue by enabling us to explicitly indicate that an input is required, either through the @Input decorator.

   Copy

   @Input({required: true})
   title!: string;
   
   or the @Component decorator inputs array:
   
   @Component({
    ...
    inputs: [
      {name: 'title', required: true}
    ]
   })
   

   Nevertheless, the new solution possesses two significant limitations. Firstly, it solely functions in Ahead-of-Time (AOT) compilation and does not apply to Just-in-Time (JIT) compilation.

   Secondly, it remains affected by the strictPropertyInitialization TypeScript compilation flag, which is typically enabled by default in Angular (as it is recommended and beneficial).

   TypeScript will generate an error for this property since it is declared as non-nullable but lacks initialization in the constructor or inline declaration.

   

   Hence, it is necessary to disable this check in order to proceed. One way to achieve this is by explicitly indicating the non-nullability of the property using the non-null assertion operator, even though it must be provided in the consumer template.

5. Esbuild Dev Server

   Ng build and ng serve in Angular version 16 now have experimental support for esbuild. While still in the experimental phase, this feature offers faster startup times (at least twice as fast) compared to the webpack implementation. However, it requires further improvements and optimizations for better performance.

   For development server purposes, Angular now utilizes Vite in ng serve. Additionally, both development and production builds are powered by esbuild.

   To experience the benefits of Vite + esbuild, you can update your angular.json configuration.

   Copy

   ...
   "architect": {
   "build": { /* Add the esbuild suffix/*
   "builder": "@angular-devkit/build-angular:browser-esbuild",
   ...
   

   To enable the use of “@angular-devkit/build-angular:browser-esbuild” instead of “@angular-devkit/build-angular:browser”, you should make this change here.

6. Binding router Information to Component Inputs

   With this capability, the routing data mentioned below will be easily accessible in the dynamic component as input. As a result, we can utilize inputs to retrieve these values instead of relying on ActivatedRoute. This approach can significantly benefit our application by eliminating a significant amount of redundant code.

   Related Post: Resolver in Angular
   • Router data
   • Resolved router data
   • params
   • query Params
   Copy

   // The current approach, which remains functional.
   
   @Component({
   ...
   })
   class SomeComponent {
   route = inject(ActivatedRoute);
   data = this.route.snapshot.data['dataKey'];
   params = this.route.snapshot.params['paramKey']
   }
   //New approach
   @Component({
   ...
   })
   class SomeComponent {
   @Input() dataKey: string;
   @Input() paramKey: string;
   //or
   @Input() set dataKey(value: string){
   //react to the value
   };
   @Input() set paramKey(value: string){
   //react to the value
   };
   }
   

7. takeUntilDestroyed and DestroyRef

   Gradually, Angular is facilitating a more functional coding style. One step in this direction is the inclusion of the DestoryRef and takeUntilDestroyed RxJS operators. These operators serve as replacements for the ngOnDestroy component’s lifecycle hook. Previously, if we desired to use ngOnDestroy within functions, it was not possible since it relied on classes.

   Copy

   @Component({})
   class SomeComponent {
   destroyRef = inject(DestroyRef);
   store = inject(Store);
   user
   constructor() {
   const sub = this.store.select(getUser()).subscribe((user) => {
   this.user = user
   });
   destoryRef.onDestroy(() => {
   sub.unsubscribe()
   })
   //OR
   const sub = this.store.select(getUser()).pipe(takeUntilDestroyed())
   .subscribe((user) => {
   this.user = user
   });
   }
   }
   

   The usage of the takeUntilDestroyed operator is restricted to the constructor context exclusively. If we intend to utilize it outside of the constructor, we need to provide destroyRef as an argument.

   In contrast to subscriptions in RxJS, this functionality is internally utilized to handle the cleanup of signal impacts. Consequently, no manual cleanup is required.

   Related Post: Angular best practises

Additional features of Angular 16

• The introduction of standalone schematics in the developer preview allows for the creation of new Angular projects as standalone entities, providing a streamlined process.
• The Jest testing framework is being experimentally supported, indicating ongoing development and exploration of its capabilities.
• Developers working with Angular have the ability to specify a nonce attribute for component inline styles, which Angular then includes inlined.
• In Angular templates, self-closing tags can be utilized to create closing tags for all the affected components, resulting in a more concise syntax.
• Angular 16 brings an enhancement to the application performance and developer experience by introducing the option to link or bind route parameters with corresponding component’s inputs for the router.
• The notable inclusion of TypeScript 5.0 support is particularly relevant for ECMAScript decorators that extend JavaScript classes, providing expanded functionality and compatibility.
• Several schematics have been revised to facilitate independent applications, such as ng-new and the application schematic, the Angular Universal schematic, and the app-shell schematic.
• Angular Universal allows Angular to render an app on the server, generating static HTML contents, which represents an app state.
• In Angular 15, Angular Material transitioned to being built on MDC (Material Design Components). In version 16, the Angular team focused on incorporating design tokens from Material Design. This enables smoother migration to Angular Material 3 in the future and empowers designers and developers to extensively customize the user interface of their applications.

Easy Way to Install or Upgrade Angular 16

Angular offers multiple Angular development tools. Therefore, you just need to install Angular 16 via npm.

Execute the following command in the CLI.

npm install –global @angular/cli@next

Using this command, you can easily install Angular CLI’s latest version on your system.

Accelerate Your Application Performance with Angular 16

Following the release of Angular 15, which became a production-ready version on November 22, Angular 16 is now generating excitement for its significant enhancements and updates in terms of Angular’s reactivity and server-side rendering in the near future.

Furthermore, these forthcoming updates will empower AngularJS development companies and developers to harness improved developer experience and performance when building inclusive applications.