As its only officially supported programming language, Angular is tightly coupled with TypeScript. Support for new versions of TypeScript is introduced with major and minor version releases of Angular. In this chapter, we will explore three powerful language features that have been released in the recent versions of TypeScript and Angular:

• The optional chaining operator (?.)
• The nullish coalescing operator (??)
• Native private class members (#)

Through simple examples, we will highlight the strengths of these modern programming language features. We will even learn how two of the new operators work elegantly together in common scenarios. Learning about this new syntax and semantics is key to understanding the examples throughout this book.

Globalization is the process of supporting and adapting multilingual and regional capabilities in an application. Angular Ivy introduces improved globalization APIs. Together...

To support all the features introduced in this chapter, your application requires at least the following:

• Angular Ivy version 9.1
• TypeScript version 3.8

You can find the complete code examples for the globalization APIs in this book's companion GitHub repository at https://github.com/PacktPublishing/Accelerating-Angular-Development-with-Ivy/tree/main/projects/chapter1/globalization.

TypeScript is an integral part of Angular, but because Angular has its own compiler transformations that extend TypeScript's compilation steps, we are inevitably tied to the version of TypeScript that the Angular compiler supports. Fortunately, Angular is good at keeping up with recent versions of TypeScript. In this section, we are going to discuss some of the most noteworthy additions to the TypeScript language in the most recent versions supported by Angular Ivy.

The optional chaining operator

TypeScript version 3.7 introduces a new operator for optional property access, optional element access, and optional calls. The optional chaining operator (?.) short circuits in the case of nullish values – that is, null or undefined – in which case it evaluates to undefined.

Optional chaining is great for working with composite objects or just plain old complex data structures such as large business documents...

Multilingual applications use globalization to give users from different countries and backgrounds a regional experience. Angular has built-in APIs for managing both internationalization and localization. In this section, we will walk through configuration and implementation examples to illustrate some of the new globalization possibilities Ivy brings us.

Bundling localizations

Angular uses locale data for regional variations for formatting dates, currencies, decimal numbers, and percentages. In Angular Ivy, we can bundle a single locale as part of the build by using the localize builder option. Let's say we wanted our application to use the French locale. We can do this by configuring our project build as follows. This also implicitly replaces the value provided for the LOCALE_ID dependency injection token in the @angular/core package:

{
  "projects": {
    "my-app...

For many different types of tests, Angular's TestBed API is both necessary and useful. Ivy introduces a strongly typed API for resolving dependencies through the Angular testing module injector, which can be configured using the static TestBed.configureTestingModule method. In this section, we will explore stronger typing in Angular tests.

Let's also look at an integrated component test for an Angular component using a custom Angular Material SVG icon. This can be done using the FakeMatIconRegistry service that was introduced with Angular Ivy.

Resolving strongly typed dependencies with TestBed.inject

TestBed.get always returns a value of the any type. This static deprecated method has not been deprecated as of Angular version 12, but it could be removed in any major version following that. Its replacement is the type-safe TestBed.inject static method.

Let's look at a couple of simple examples to see the immediate...

In this first chapter, we discussed the modern language features that were introduced with the recent versions of TypeScript to accompany Angular Ivy. Through simple, common examples, we learned about nullish coalescing and optional chaining. We also identified the differences between TypeScript access modifiers and native private class members, all of which are features that we will make use of throughout the code in this book. By learning about these topics, you can now refactor your existing application or implement new features using these powerful language additions.

Globalization is needed for regional and multilingual support in Angular applications. We covered the basics of configuring multiple locales for our Angular build process. After that, we discovered our newfound ability to lazy load locale data such as regional number, currency, and date formats, as well as directionality information.

To demonstrate runtime locale switching, we created a locale picker...