Master Angular 16 (a study guide)
Tags: angular, typescript, javascript
Published: 2023-05-05 08:09:24

---
title: Master Angular 16 (a study guide)
published: true
description: A study guide that helps you learn the new version of Angular
tags: #angular #typescript #javascript
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szok032njz1p1vnhc2mt.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-02 19:26 +0000
canonical_url: https://www.angularaddicts.com/p/master-angular-16
---

The latest version of Angular was released this week. [Minko Gechev](@mgechev) summarizes the most important new features in his [release announcement](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d).

This study guide helps you learn the new version of Angular. 

## 🎯Changes and new features

In this article, I list out the most important changes and new features, also share resources that will teach you how these new Angular features work:

- Signals
- `DestroyRef`
- `takeUntilDestroyed`
- Required inputs
- Bind Router information to component inputs
- Node.js v14 support has been removed
- TypeScript 5.0 Support
- Angular Compatibility Compiler (ngcc) has been removed
- Server Side Rendering: Non-destructive hydration + now the results of a request done on the server side can be reused on the client side
- Strict type checking for `ngTemplateOutlet`
- `provideServiceWorker` function to register service workers in standalone applications
- Experimental Jest support

Next to these features, Angular 16 has a new Vite + Esbuild based dev server.

Naturally, reading articles about the changes is a good idea, additionally, 

- the [official documentation](https://angular.io/docs), and 
- the [Angular’s changelogs](https://github.com/angular/angular/blob/main/CHANGELOG.md)

also provide great insights, you should check these out, too.

---

## 📌Signals

Official docs: [Angular Signals](https://next.angular.io/guide/signals)
GitHub discussion: [Angular Reactivity with Signals](https://github.com/angular/angular/discussions/49090)
RFC: [RFC: Angular Signals](https://github.com/angular/angular/discussions/49685)
PR: feat(core): [add Angular Signals to the public API](https://github.com/angular/angular/pull/49150)
PR: [Prototype of the RxJS interop layer for signals](https://github.com/angular/angular/pull/49154)
PR: [feat(core): Mark components for check if they read a Signal](https://github.com/angular/angular/pull/49153)

A new primitive type called “Signal” has been introduced in Angular. It’s designed to store a value similar to a regular variable. When the Signal’s value changes, it notifies the interested consumers. Signals store both primitive data types and objects.

A “Computed Signal” derives its value from other Signals. To create a Computed Signal, we need to use the computed function and specify the derivation function.

In case we use the OnPush change detection in a component and it has a Signal in its template, Angular tracks the Signal as a dependency for the component and marks the component for check if the Signal’s value changes. In Angular 17 this will change, it will be possible to use Signal based per-component change detection without zone.js.

[Pawel Kozlowski](https://twitter.com/pkozlowski_os)’s talk at the NgBe is a great introduction to Signals, what features are in Angular 16 and what’s expected in Angular 17:

{% embed https://www.youtube.com/watch?v=bByZ6FGyuO0 %}

[Deborah Kurata](https://twitter.com/DeborahKurata) wrote a [detailed tutorial on Signals](https://www.freecodecamp.org/news/angular-signals/), she explained why we need Signals, what they are, and how to create, read and update them. She also demonstrates the concept of computed Signals and effects.

[Manfred Steyer](https://twitter.com/ManfredSteyer) [compares the current Zone.js based change detection with the new Signal based approach](https://www.angulararchitects.io/aktuelles/angular-signals/).

[Stefan Haas](https://medium.com/u/63bb7f62ed7a) explains [how signal and RxJS interoperability works](https://levelup.gitconnected.com/signals-and-the-rxjs-interop-784d20214ca3).

[Tomas Trajan](https://twitter.com/tomastrajan) explains [how Signals work using the push & pull concepts](https://angularexperts.io/blog/angular-signals-push-pull).

---

## 📌DestroyRef

Official docs: [DestroyRef](https://next.angular.io/api/core/DestroyRef)
Commit: [feat(core): introduce concept of DestroyRef](https://github.com/angular/angular/commit/0f5c8003ccd1a75516d6a0e31cdb752d031ec430)

> `DestroyRef` lets you set callbacks to run for any cleanup or destruction behavior.

Example:

```ts
@Component({
  selector: 'component-1',
  standalone: true,
  template: ``,
})
class Component1 {
  constructor(private destroyRef: DestroyRef) {
    destroyRef.onDestroy(() => {
      // run this cleanup code, when the component is destoryed
    });
  }
}
```

In his article, [Netanel Basal](https://medium.com/u/b889ae02aa26) [shows an example](https://netbasal.com/getting-to-know-the-destroyref-provider-in-angular-9791aa096d77) for how to create a reusable logic that performs a cleanup task when a scope is destroyed.

---

## 📌takeUntilDestroyed

Commit: [feat(core): implement takeUntilDestroyed in rxjs-interop](https://github.com/angular/angular/commit/e8831984601da631afc29f9fd72d36f57696f936)

`takeUntilDestroyed` completes an observable in case the calling component (or directive, service or pipe) is destroyed.

In the following example, when the component is created, it starts to show ‘Tick’ messages on the browser’s console, using a subscription to a 2 second `interval()`. When the component is destroyed, it unsubscribes from the `interval()`:

```ts
@Component({
  selector: 'component-1',
  standalone: true,
  template: ``,
})
class Component1 {
  constructor() {
    interval(2000).pipe(takeUntilDestroyed()).subscribe(() => console.log('Tick'));
  }
}
```

It’s also possible to pass a specific `DestroyRef` as a parameter to `takeUntilDestroyed`, so we can create reusable functions with subscriptions that unsubscribe when the context is destroyed:

```ts
@Component({
  selector: 'component-1',
  standalone: true,
  template: ``,
})
class Component1 {
  constructor(private destroyRef: DestroyRef) {
    reusableTicks(destroyRef);
  }
}
```

---

## 📌Required inputs

Official docs: [Input](https://next.angular.io/api/core/Input)
PR: feat(compiler): [add support for compile-time required inputs](https://github.com/angular/angular/pull/49453)

We can mark component- or directive inputs as required. The following example fails in compile time, as in the `Component2`’s template we didn’t provide the required `text` input:

```ts
@Component({
  selector: 'component-1',
  standalone: true,
  template: ``,
})
class Component1 {
  // ❗ this is a required input
  @Input({ required: true }) text: string;
}

@Component({
  selector: 'component-2',
  standalone: true,
  template: `
    <component-1></component-1>
  `,
  imports: [Component1]
})
class Component2 {
  constructor(private destroyRef: DestroyRef) {
    destroyRef.onDestroy(() => {
      // run this cleanup code, when the component is destoryed
    });
  }
}
```

---

## 📌Bind Router information to component inputs

Official docs: [Router / Getting route information, withComponentInputBinding](https://next.angular.io/guide/router)
PR: [Feature to bind Router information to component inputs](https://github.com/angular/angular/pull/49633)

This new feature simplifies the process of getting route information. [Enea Jahollari](https://medium.com/u/eb2c15cb2c38) [explains how this new feature works by examples](https://itnext.io/bind-route-info-to-component-inputs-new-router-feature-1d747e559dc4).

---

## 📌Node.js v14 support has been removed

Changelog entry: [Node.js v14 support has been removed](https://github.com/angular/angular/blob/main/CHANGELOG.md#core-21)

> Node.js v14 is planned to be End-of-Life on 2023–04–30. Angular will stop supporting Node.js v14 in Angular v16. Angular v16 will continue to officially support Node.js versions v16 and v18.

---

## 📌TypeScript 5

From Angular’s perspective, the two most important new features in Typescript 5 are:

- the decorators
- and the supporting of multiple configuration files in `tsconfig.json`‘s extends.

### Decorators

TypeScript 5 supports a new version of the [ECMAScript decorator proposal](https://github.com/tc39/proposal-decorators), referred to as ‘Standard decorators’. 

[Kevin Kreuzer](https://twitter.com/kreuzercode) explains us [in his article](https://angularexperts.io/blog/typescript-decorators), how these new decorators work.

### Multiple configuration file support in `tsconfig.json`‘s extends

For example, both `strict` and `noImplicitReturns` are enabled in the final `tsconfig.json` in the following example:

```ts
// tsconfig-a.json
{
    "compilerOptions": {
        "strict": true
    }
}

// tsconfig2-b.json
{
    "compilerOptions": {
        "noImplicitReturns": true
    }
}

// tsconfig.json
{
    "extends": ["./tsconfig-a.json", "./tsconfig-b.json"],
    "files": [
      "src/main.ts",
      "src/polyfills.ts"
    ]
}
```

You can find more details of the new Typescript features in their [official announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/).

---

## 📌Angular Compatibility Compiler (ngcc) has been removed

Changelog entry: [Angular Compatibility Compiler (ngcc) has been removed](https://github.com/angular/angular/blob/main/CHANGELOG.md#compiler-9)

Angular 9 transitioned its rendering architecture from the “ View Engine” to “Ivy”. However, to support libraries that were still dependent on the “View Engine”, Angular Compatibility Compiler (ngcc) was created. In Angular 16, ngcc and all other codes related to the old “View Engine” have been removed, so “View Engine” libraries can no longer be used in v16+.

To learn more about “Ivy”, read [Maria Korneeva](https://twitter.com/BrowserPerson)‘s [article about how “View Engine” and “Ivy” works and what is new in “Ivy”](https://browserperson.medium.com/from-view-engine-to-ivy-rendering-in-angular-a81d9eb8199b).

---

## 📌NgZone is configurable in bootstrapApplication

Official docs: [provideZoneChangeDetection](https://next.angular.io/api/core/provideZoneChangeDetection)
PR: [Add ability to configure NgZone in bootstrapApplication](https://github.com/angular/angular/pull/49557)

There are two zone configuration related changes in Angular 16:

- We can provide a custom zone implementation in `bootstrapApplication`
- NgZone now has two configurable options: `eventCoalescing` and `runCoalescing`, these options might help [reduce the change detection cycles in your application](https://angular.io/api/core/NgZoneOptions). 

```ts
class CustomZone extends NoopNgZone {}

bootstrapApplication(
  StandaloneCmp, { 
  providers: [
    // provide a custom zone implementation
    { provide: NgZone, useValue: new CustomZone() }
   ]
  }
);
```

```ts
bootstrapApplication(
  StandaloneCmp, { 
  providers: [
    // enable eventCoalescing and runCoalescing
    provideZoneChangeDetection({
      eventCoalescing: true,
      runCoalescing: true
    })
  ]
});
```

---

##📌Server Side Rendering improvements

### Non-destructive hydration

PR: [feat(platform-browser): add a public API function to enable non-destructive hydration](https://github.com/angular/angular/pull/49666)

With non-destructive hydration, Angular has the capability of reusing pre-existing DOM structures on the client-side that were initially rendered by the server. This prevents the flicker that occurs when the page is rendered and ready for interaction by users.

### The results of the request done on the server side can be reused on the client side

PR: [feat(platform-browser): enable HTTP request caching when using provideClientHydration](https://github.com/angular/angular/pull/49699)

To avoid the need of refetching the same data on the client side, requests made on the server side will be cached and accessible on the client side.

[Jessica Janiuk](https://medium.com/u/ddabf98cd3b9) summarized the current state and future of the server side rendering in her [blog post](https://medium.com/angular-blog/whats-next-for-server-side-rendering-in-angular-2a6f27662b67).

---

## 📌Strict type checking for ngTemplateOutlet

PR: [fix(common): strict type checking for ngtemplateoutlet](https://github.com/angular/angular/pull/48374)

Previously, when we passed a context to ngTemplateOutlet, it was passed as an Object, so in the following example there was no compilation error:

```ts
interface Context1 {
  prop: number;
}

@component({
  standalone: true,
  imports: [NgTemplateOutlet],
  selector: 'person',
  template: `
    <ng-container
      *ngTemplateOutlet="
        myTemplateRef;
        context: { prop: 1, missingProp: 2 }
      "></ng-container>
  `,
})
export class Component1 {
  templateRef!: TemplateRef<Context1>;
}
```

Now in Angular 16 the code in the previous example fails with a compile time error, as `missingProp` is not defined in `Context1`. We can fix this by adding the `missingProp` property to `Context1` or add `$any(…)` inside the template to preserve the previous behavior.

---

## 📌provideServiceWorker function to register service workers in standalone applications

Official docs: [Service workers](https://next.angular.io/api/service-worker) / [provideServiceWorker](https://next.angular.io/api/service-worker/provideServiceWorker)
PR: [feat(service-worker): add function to provide service worker](https://github.com/angular/angular/pull/48247)

Previously to register a service worker in a standalone app, we had to use `importProvidersFrom(ServiceWorkerModule.register(…))`.

provideServiceWorker is a new way to register service workers in standalone apps, usage example:

```ts
bootstrapApplication(AppComponent, {
 providers: [
   provideServiceWorker('my-service--worker.js')
 ],
});
```

---

## 📌Experimental Jest support

The Angular Team [added initial experimental support for Jest in Angular 16](https://blog.angular.io/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca). In Angular 17, they’ll replace the deprecated Karma test runner with the [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/).

---

➕ Have you seen any other resources I should add to this Angular 16 Study Guide? Please send it to me so that I can feature it in the article!

---

## 👨‍💻About the author

My name is [Gergely Szerovay](https://dev.to/gergelyszerovay), I work as a frontend development chapter lead. Teaching (and learning) Angular is one of my passions. I consume content related to Angular on a daily basis — articles, podcasts, conference talks, you name it.

I created the Angular Addict Newsletter so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered.

Next to the newsletter, I also have a publication called — you guessed it — [Angular Addicts](https://angularaddicts.com/). It is a collection of the resources I find most informative and interesting. Let me know if you would like to be included as a writer.

Let’s learn Angular together! [Subscribe here](https://newsletter.angularaddicts.com/) 🔥

Follow me on [Medium](https://medium.com/@GergelySzerovay), [Twitter](https://twitter.com/GergelySzerovay) or [LinkedIn](https://www.linkedin.com/in/gergelyszerovay/) to learn more about Angular!