Angular

What's new in Angular v12

Published May 19, 2021

Updated Feb 16, 2023

8 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Angular 12 Released

Angular v12 has been released! Here are some main updates.

Nullish coalescing operator support

@Component(){
  selector: 'app-comp',
  template: `<div>Hello, {{title ?? 'Angular'}}</div>`
})

Core

APP_INITIALIZER now supports Observable.

It is also a long-waited feature request: in Angular v12, we can now use Observable as APP_INITIALIZER.

import { APP_INITIALIZER } from '@angular/core';

function observableInitializer() {
  // Before Angular v12, you have to return a Promise.
  // return () => someObservable().toPromise();
  // Now you can return the observable directly.
  return () => someObservable();
}

@NgModule({
  imports: [...],
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: observableInitializer,
    multi: true
  }],
  ...
})
export class AppModule {}

Http

HttpClient

Before Angular 12, if you wanted to pass boolean or number as HttpParams, you had to:

HttpClient.get('api/endpoint', { param1: '10', param2: 'true' })

With Angular 12, the HttpParams has been updated to accept the boolean and the number values:

HttpClient.get('api/endpoint', { param1: 10, param2: true })

Http Interceptor Context

This is a very long waited feature. In Angular 12, you can now pass data between interceptors. Here is a great article by Netanel Basal.

Form

Form: Support min/max validator

HTML5 standards support built in validator such as min/max for input element.

<input type="number" min="5" max="10">

Before Angular 12, the min/max attributes are ignored by FormsModule, so the Angular FormControl valid property will still be true even the input data exceed the min or max range. But the underlying DOM HTMLInputElement's validity.valid will still be false.

From Angular 12, the min/max validator is implemented so the valid result will be consistent with native DOM status.

Animation

Sometimes we want to disable animations. Before Angular 12, we needed to provide the NoopAnimationModule. In Angular 12, there is a new way to do that by using BrowserAnimationsModule.withConfig({disableAnimations: true}) so the user can disable animations based on the runtime information.

Router

Router: Support location.historyGo() functionality.

Support location.historyGo(relativePosition: number) to navigate to the specific history page so it will be compatible with the DOM history.go() API.

Router: Provides RouterOutletContract interface

Provides RouterOutletContract interface allows the 3rd party library to implement its own RouterOutlet more easily (such as add own logic for navigation, animation). For details, please refer to this PR https://github.com/angular/angular/pull/40827.

Tooling

Angular Linker

Ivy has been released from Angular 9 and has become the default in the Angular App from Angular 10. It is fast, easy to debug, and has a lot of possibilities in the future. However, for Angular library development, the user still has to compile the lib with the old ViewEngine to publish to npm. The Angular library deploy process is:

The developer compiles the lib with ViewEngine.
When the Angular app is using the lib, when yarn install, Angular compiler will travel the node_modules directory and use ngcc to convert the ViewEngine library to Ivy. This process is slow and needs to run whenever node_modules changes.

The reason we need this process is if we remove ngcc and publish the Ivy instructions to npm, the instruction code will become the public API. It is very difficult to change it in the future. ViewEngine is not instruction but metadata, so it can be used across multiple versions even for Ivy.

To resolve this issue, Angular provides an RFC last year, https://github.com/angular/angular/issues/38366, with an idea which is Angular Linker. It is an advanced version ngcc. It compiles the Angular library code with partial mode.

The output is not Ivy instructions, so it allows future changes.
The output is still metadata, but not like ViewEngine, the metadata is self-contained, so the output for one component contains all the information needed to compile this component without any other global knowledge(such as NgModule). It is fast and be able to do incremental/cache/parallel build.
The new intermediate output can be directly consumed by Angular Compiler, so the node_modules folder doesn't need to be touched.

To use this feature, update the option in the tsconfig.lib.prod.json like this.

"enableIvy": "true", "compilationMode": "partial"

Typescript 4.2 support

Supports Typescript 4.2.

E2E protractor RFC

Angular is using protractor for e2e test. The protractor has a long history from 2013. It helped users write e2e test, and to support better async test, protractor did a lot of work via ControlFlow to make async/await work.

Since the native async/await is introduced into Javascript standard, protractor ControlFlow becomes incompatible with the native async/await, so protractor drops the ControlFlow and uses the solution of selenium-webdriver completely.

Also protractor has a lot of features just for AngularJS such as locator/mock. After removing these codes, protractor becomes a wrapper of selenium wrapper without any valuable functionalities.

And now the Angular developers are using several alternative solutions to do the e2e test such as:

Cypress
PlayWright
Puppeteer

The Angular team posts an RFC to deprecate the protractor and make Angular easy to integrate with the 3rd party e2d platform.

Here is the RFC https://github.com/angular/protractor/issues/5502

Based on the RFC, Angular plans to drop the protractor support until Angular v15 and will guide the Angular developers to select an alternative platform when the user tries to run ng e2e.

CLI: Webpack 5 support

Webpack 5 support many new features such as:

Module federation is a new way to develop micro-frontend
Disk caching for faster build
Better tree shaking

CLI: Lint

Angular v11 deprecated to use TSLint as the default linter, and Angular v12 remove TSLint and codelyzer from cli, so please reference the following article to migrate to eslint. (https://github.com/angular-eslint/angular-eslint#migrating-from-codelyzer-and-tslint)

CLI: Build

When we build an Angular app, we use ng build --prod all the time. The options often confuse the user that --prod will make a production build, but it is just an alias of ng build --configuration=production. To make this more clear, CLI remove --prod and add a defaultConfiguration setting with the value production. Now, ng build default will build with production configuration.

CLI: Build bundles with ES2017+

Until Angular 12, Angular only supports output bundles in ES2015 format. ES2017+ is not supported because Zone.js is not supporting native async/await patching. From Angular 12, CLI supports to only transpile the native async/await code to Promise but keep the other ES2017+ code untouched, so you can specify the output bundle format to ES2017+ from Angular 12.

CLI: `inlineCritical` by default

The inlineCritical settings of styles optimization in the angular.json becomes true by default. Please reference here for more details.

CLI: `strict` mode by default

The workspace generated by CLI will use strict mode by default. To generate non-strict mode, use --no-strict option.

CLI: Built in `tailwindcss` support

Tailwindcss is a popular CSS library. Before Angular 12, to integrate with Tailwindcss, the user needs to do some postcss configuration themselves. With Angular 12, this is done by the CLI so it is super easy to do the integration.

npm install -D tailwindcss npx tailwindcss init

This is the same process to install the normal Tailwindcss.

CLI: confirm `ng add` before install packages from npm.

Now ng add will ask the user to confirm the package/version before installing the packages. This gives the user a chance to stop the process when the user has a typo in the project name or want to initialize the project with other options.

Angular Language Service for Ivy

Angular Ivy has been released since v9, but the Angular Language Service is still using View Engine to compile the template and did a lot of magic work to make everything work in Ivy, which is not efficient. Also, since View Engine is deprecated, some issues and features may not be implemented in the View Engine version of Language Service for Ivy.

Now we have the new Angular Language Service written in Ivy and for Ivy.

You can opt-in the new Angular Language Service beta with Ivy support now. To use it in VSCode, try the following steps.

Install the latest extension in the VSCode Marketplace
Set strictTemplates: true in tsconfig.json Angular compiler options
Go to Preferences -> Settings -> Extensions -> Angular Language Service -> Check “Experimental Ivy”

Please reference this blog for more details.

CLI: Support inlineStyleLanguage option

A new build option inlineStyleLanguage is added. Now you can write css/sass/scss/less in the inline style of a component!

Angular Components

MDC Web based new component

Angular Component is continuing to create new MDC Web based components and the backward-compatible. Here is the design.

For the new Angular Material Component, Angular CDK provides the behavior and the MDC Web Component provides the user experiences defined by the Material Design spec. The Angular Material team doesn't need to maintain another implementation of the Material Design and the UI will be more consistent.

New `@use` SASS module system

You may already use the @import syntax in the SASS style file, but it has some flaws and make the module system hard to maintain. For details, please reference the article here.

Now Angular Components are using the new @use syntax for the better module system of SASS. To use the new module system, you can use the following schematic to migrate.

ng g @angular/material:themingApi

Also, the node-sass package will be replaced by the new sass package.

Deprecations

IE11 support is deprecated!
ViewEngine for application build is removed. All applications are using Ivy to build.
entryComponent is removed from Component schematic.
string based lazy loading support is dropped.

{ path: 'Lazy', component: LazyComponent }, { path: 'lazy', loadChildren: './modules/lazy/lazy.module#LazyModule', }

is not supported, please use dynamic import instead.

{ path: 'Lazy', component: LazyComponent }, { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

For the full deprecation list, please check here.

How to update to v12

Use the Angular CLI:

ng update @angular/cli @angular/core

You can find more information from update.angular.io/.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Jia Li
Jia Li is a frontend developer with passion, he is an Angular Collaborator and the code owner of angular/zone.js. He loves Angular and now develops Angular enterprise application.
@JiaLiPassion @JiaLiPassion

Exploring Angular Forms: A New Alternative with Signals

Exploring Angular Forms: A New Alternative with Signals In the world of Angular, forms are essential for user interaction, whether you're crafting a simple login page or a more complex user profile interface. Angular traditionally offers two primary approaches: template-driven forms and reactive forms. In my previous series on Angular Reactive Forms, I explored how to harness reactive forms' power to manage complex logic, create dynamic forms, and build custom form controls. A new tool for managing reactivity - signals - has been introduced in version 16 of Angular and has been the focus of Angular maintainers ever since, becoming stable with version 17. Signals allow you to handle state changes declaratively, offering an exciting alternative that combines the simplicity of template-driven forms with the robust reactivity of reactive forms. This article will examine how signals can add reactivity to both simple and complex forms in Angular. Recap: Angular Forms Approaches Before diving into the topic of enhancing template-driven forms with signals, let’s quickly recap Angular's traditional forms approaches: 1. Template-Driven Forms: Defined directly in the HTML template using directives like ngModel, these forms are easy to set up and are ideal for simple forms. However, they may not provide the fine-grained control required for more complex scenarios. Here's a minimal example of a template-driven form: ` ` 2. Reactive Forms: Managed programmatically in the component class using Angular's FormGroup, FormControl, and FormArray classes; reactive forms offer granular control over form state and validation. This approach is well-suited for complex forms, as my previous articles on Angular Reactive Forms discussed. And here's a minimal example of a reactive form: ` ` Introducing Signals as a New Way to Handle Form Reactivity With the release of Angular 16, signals have emerged as a new way to manage reactivity. Signals provide a declarative approach to state management, making your code more predictable and easier to understand. When applied to forms, signals can enhance the simplicity of template-driven forms while offering the reactivity and control typically associated with reactive forms. Let’s explore how signals can be used in both simple and complex form scenarios. Example 1: A Simple Template-Driven Form with Signals Consider a basic login form. Typically, this would be implemented using template-driven forms like this: ` ` This approach works well for simple forms, but by introducing signals, we can keep the simplicity while adding reactive capabilities: ` ` In this example, the form fields are defined as signals, allowing for reactive updates whenever the form state changes. The formValue signal provides a computed value that reflects the current state of the form. This approach offers a more declarative way to manage form state and reactivity, combining the simplicity of template-driven forms with the power of signals. You may be tempted to define the form directly as an object inside a signal. While such an approach may seem more concise, typing into the individual fields does not dispatch reactivity updates, which is usually a deal breaker. Here’s an example StackBlitz with a component suffering from such an issue: Therefore, if you'd like to react to changes in the form fields, it's better to define each field as a separate signal. By defining each form field as a separate signal, you ensure that changes to individual fields trigger reactivity updates correctly. Example 2: A Complex Form with Signals You may see little benefit in using signals for simple forms like the login form above, but they truly shine when handling more complex forms. Let's explore a more intricate scenario - a user profile form that includes fields like firstName, lastName, email, phoneNumbers, and address. The phoneNumbers field is dynamic, allowing users to add or remove phone numbers as needed. Here's how this form might be defined using signals: ` > Notice that the phoneNumbers field is defined as a signal of an array of signals. This structure allows us to track changes to individual phone numbers and update the form state reactively. The addPhoneNumber and removePhoneNumber methods update the phoneNumbers signal array, triggering reactivity updates in the form. ` > In the template, we use the phoneNumbers signal array to dynamically render the phone number input fields. The addPhoneNumber and removePhoneNumber methods allow users to reactively add or remove phone numbers, updating the form state. Notice the usage of the track function, which is necessary to ensure that the ngFor directive tracks changes to the phoneNumbers array correctly. Here's a StackBlitz demo of the complex form example for you to play around with: Validating Forms with Signals Validation is critical to any form, ensuring that user input meets the required criteria before submission. With signals, validation can be handled in a reactive and declarative manner. In the complex form example above, we've implemented a computed signal called formValid, which checks whether all fields meet specific validation criteria. The validation logic can easily be customized to accommodate different rules, such as checking for valid email formats or ensuring that all required fields are filled out. Using signals for validation allows you to create more maintainable and testable code, as the validation rules are clearly defined and react automatically to changes in form fields. It can even be abstracted into a separate utility to make it reusable across different forms. In the complex form example, the formValid signal ensures that all required fields are filled and validates the email and phone numbers format. This approach to validation is a bit simple and needs to be better connected to the actual form fields. While it will work for many use cases, in some cases, you might want to wait until explicit "signal forms" support is added to Angular. Tim Deschryver started implementing some abstractions around signal forms, including validation and wrote an article about it. Let's see if something like this will be added to Angular in the future. Why Use Signals in Angular Forms? The adoption of signals in Angular provides a powerful new way to manage form state and reactivity. Signals offer a flexible, declarative approach that can simplify complex form handling by combining the strengths of template-driven forms and reactive forms. Here are some key benefits of using signals in Angular forms: 1. Declarative State Management: Signals allow you to define form fields and computed values declaratively, making your code more predictable and easier to understand. 2. Reactivity: Signals provide reactive updates to form fields, ensuring that changes to the form state trigger reactivity updates automatically. 3. Granular Control: Signals allow you to define form fields at a granular level, enabling fine-grained control over form state and validation. 4. Dynamic Forms: Signals can be used to create dynamic forms with fields that can be added or removed dynamically, providing a flexible way to handle complex form scenarios. 5. Simplicity: Signals can offer a simpler, more concise way to manage form states than traditional reactive forms, making building and maintaining complex forms easier. Conclusion In my previous articles, we explored the powerful features of Angular reactive forms, from dynamic form construction to custom form controls. With the introduction of signals, Angular developers have a new tool that merges the simplicity of template-driven forms with the reactivity of reactive forms. While many use cases warrant Reactive Forms, signals provide a fresh, powerful alternative for managing form state in Angular applications requiring a more straightforward, declarative approach. As Angular continues to evolve, experimenting with these new features will help you build more maintainable, performant applications. Happy coding!...

Oct 4, 2024

5 mins

AngularJavaScript

4 Angular Component Libraries That are Perfect for Beginners

For beginners starting with Angular, the journey can feel daunting, especially when it comes to setting up projects from scratch. However, there is a range of outstanding Angular component libraries that alleviate this initial hurdle: ready-made toolkits, empowering newcomers to start building Angular applications without the complexities of bootstrapping their projects. Let’s take a look! Angular Material Angular Material is a UI component library by Google for Angular applications. It provides a variety of pre-built components following the Material Design guidelines, offering customization options, responsive design, and accessibility features. It's seamlessly integrated with Angular and offers extensive documentation and community support. NG-ZORRO NG-ZORRO is an Angular UI component library based on Ant Design by Alibaba. It offers a variety of customizable components for building modern web applications. With seamless Angular integration, responsive design, and accessibility features, NG-ZORRO simplifies development while following Ant Design principles. NG Bootstrap NG Bootstrap is a library for Angular developers to easily incorporate Bootstrap components into their applications without relying on jQuery. It offers Angular-specific directives and components, ensuring compatibility and performance within Angular projects while maintaining Bootstrap's responsive design and customization options. Clarity Design System Clarity is an open-source design system by VMware that offers a set of Angular components for building enterprise-scale applications. It provides components specifically tailored for data-centric applications, dashboards, and complex user interfaces. Clarity Design System emphasizes clarity, consistency, and usability in its components. The beginner’s journey can be both exhilarating and challenging. However, with the advent of powerful component libraries like Angular Material, NG-ZORRO, NG Bootstrap, and the Clarity Design System, the path becomes significantly smoother. These libraries offer pre-built components and design systems that eliminate the need to bootstrap projects from scratch. As beginners embark on their Angular journey, these libraries provide a sturdy foundation, allowing them to dive into development with confidence. By harnessing the capabilities of these libraries, beginners can not only expedite their learning curve but also craft exceptional Angular applications with ease and efficiency....

Mar 14, 2024

2 mins

Angular

Angular 11 Released

I'm so excited to see the recent release of Angular v11.0.0! There are lot of improvements especially with regards to tooling. What's new in the release CLI: Inlining of Google Fonts First, contentful paint is always the critical part for performance. [Eliminate render-blocking resources] (https://web.dev/render-blocking-resources/) is an important guide to improve the FCP performance, and Angular is also working on following the guide to inline the blocking resources. In Angular v11, the Google Fonts will be inline by adding the following options to the angular.json. ` And without this option, your Google font importing looks like this. ` After activating this optimization, it looks like this. ` CLI: Hot Module Replacement Support Angular supports HMR for a while, but to make it work requires configuration and code changes, which is not a good developer experience. From v11, it is simple to enable the HMR support by using ` Now, the live reload will also keep the state of your application, so it is much easier to apply some small updates to your application. CLI: Experimental Webpack 5 support Webpack 5 supports many new features such as: - Module federation which is a new way to develop micro-frontend - Disk caching for faster build - Better tree shaking Now, you can opt-in the Webpack 5 by adding the following section in the package.json file. ` CLI: ng build better output Now, running ng build will generate more clear output. CLI: ng serve ask for new port It is a really nice feature! If the 4200 port is in use, ng serve will ask you for a different port without re-run with --port option. ` CLI: Lint Now, Angular uses TSLint as the default linter, and since TSLint is deprecated now, Angular uses angular-eslint to replace TSLint/Codelyzer. Here is the migration guide. Features: Trusted Types support Trusted Types is a new solution to prevent DOM-based cross-site scripting vulnerabilities. Consider the following example: ` With Trusted Types enabled, the browser throws a TypeError and prevent this behavior. To tell the browser this is a trusted safe operation, you need to do it like this: ` Note that the aTrustedHtml is a TrustedHtml object. It looks similar to the DomSanitizer's functionality, so now Angular permits support to allow such an operation to return a Trusted Types. Tooling - Typescript is updated to v4.0 Deprecations - IE 9,10 and IE mobile are no longer supported. - ViewEncapsulation.Native has been removed. - async test helper function is renamed to waitForAsync. For the full deprecation list, please check here. Triaging issues and PRs The Angular team put forward a significant effort to go through all the issues/PRs now opened in the GitHub, and check/triage these issues to make sure that they are at the correct state. It greatly helps the community to get better/faster support and feedback. I am so honored to also take part in this process. How to update to v11 It is very simple. Just use the Angular CLI. ` You can find more information from update.angular.io/ and also from the official blog....

Nov 20, 2020

3 mins

Angular

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Understanding the Difference Between :focus and :focus-visible in CSS I have learned my fair share about the importance of keyboard accessibility, so I know that visual indication of the focused element is very important. But the well-known :focus pseudo-class is not always the best fit for this job. That's where :focus-visible comes in. Let's look at the differences between these two pseudo-classes and explore the best practices for using them effectively. What is the :focus Pseudo-Class? The :focus pseudo-class is a CSS selector that applies styles to any element that receives focus, regardless of how that focus was triggered. This includes focus events from keyboard navigation, mouse clicks, and touch interactions. Example Usage of :focus ` In this example, the button will display a blue outline whenever it is focused, whether the user clicks on it with a mouse, taps it on a touchscreen, or navigates to it using the keyboard. What is the :focus-visible Pseudo-Class? The :focus-visible pseudo-class is more specialized. It only applies styles to an element when the browser determines that the focus should be visible. This typically occurs when the user navigates via the keyboard or assistive technologies rather than through mouse or touch input. Example Usage of :focus-visible ` Here, the button will only show a blue outline when focused through keyboard navigation or another input method that usually requires visible focus indicators. Key Differences Between :focus and :focus-visible :focus - Behavior: Applies to any element that receives focus, regardless of the input method. - Use Cases: Ensures that all interactions with the element are visually indicated, whether by mouse, keyboard, or touch. :focus-visible - Behavior: Applies styles only when the focus should be visible, such as using a keyboard or assistive technology. - Use Cases: Ideal for scenarios where you want to provide focus indicators only to keyboard and assistive technology users while avoiding unnecessary outlines for mouse and touch users, typically required by design. Accessibility Implications :focus - Pros: - Guarantees that all users can see when an element is focused, which is critical for accessibility. - Cons: - Can lead to a suboptimal experience for mouse users, as focus styles may appear unnecessarily during mouse interactions. :focus-visible - Pros: - Enhances user experience by showing focus indicators only when necessary, thus keeping the interface clean for mouse and touch users. - Tailors the experience for keyboard and assistive technology users, providing them with clear visual cues. - Cons: - Additional considerations may be required to ensure that focus indicators are not accidentally omitted, especially in older browsers that do not support :focus-visible. - There may be cases where you want to show focus indicators for all users, regardless of input method. Best Practices for Using :focus and :focus-visible To achieve the best accessibility and user experience, combining both :focus and :focus-visible in your CSS is often a good idea. Combining :focus and :focus-visible ` Here is a Stackblitz example of what such styling could look like for you to try out and play with. Additional Tips - Test with Keyboard and Assistive Technology: Ensure that your web application is navigable using a keyboard (Tab, Shift + Tab, etc.) and that focus indicators are visible for those who rely on them. It's never a bad idea to include accessibility testing in your e2e testing suite. - Provide Clear Focus Indicators: Make sure that focus indicators are prominent and easy to see. A subtle or hard-to-spot focus indicator can severely impact accessibility for users who rely on keyboard navigation. Conclusion The :focus-visible pseudo-class offers a more refined way to manage focus indicators, improving accessibility and user experience, particularly for keyboard and assistive technology users. By understanding the differences between :focus and :focus-visible, and applying best practices in your CSS, you can create more accessible and user-friendly web applications. Remember, accessibility should never be an afterthought. By thoughtfully applying focus styles, you ensure that all users, regardless of how they interact with your site, can easily navigate and interact....

Nov 8, 2024

3 mins

AccessibilityCSSPlaywright

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Angular 12 Released

Nullish coalescing operator support

Core

APP_INITIALIZER now supports Observable.

Http

HttpClient

Http Interceptor Context

More readable Http status code

Form

Form: Support min/max validator

Animation

Router

Router: Support location.historyGo() functionality.

Router: Provides RouterOutletContract interface

Tooling

Angular Linker

Typescript 4.2 support

E2E protractor RFC

CLI: Webpack 5 support

CLI: Lint

CLI: Build

CLI: Build bundles with ES2017+

CLI: inlineCritical by default

CLI: strict mode by default

CLI: Built in tailwindcss support

CLI: confirm ng add before install packages from npm.

Angular Language Service for Ivy

CLI: Support inlineStyleLanguage option

Angular Components

MDC Web based new component

New @use SASS module system

Deprecations

How to update to v12

Jia Li

Exploring Angular Forms: A New Alternative with Signals

4 Angular Component Libraries That are Perfect for Beginners

Angular 11 Released

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Let's innovate together!

Exploring Angular Forms: A New Alternative with Signals

4 Angular Component Libraries That are Perfect for Beginners

Angular 11 Released

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

CLI: `inlineCritical` by default

CLI: `strict` mode by default

CLI: Built in `tailwindcss` support

CLI: confirm `ng add` before install packages from npm.

New `@use` SASS module system