Episode 23/32: Angular 16.2
Tags: angular, webdev, javascript, frontend
Published: 2023-08-15 12:38:28

Angular 16.2 was released. Its two main features are property bindings for dynamic components and two application hooks.

{% embed https://youtu.be/IuvyIOe4Xnk %}

## Angular 16.2

### Property Bindings for `ngComponentOutlet`

The ngComponentOutlet loads components dynamically. It had some constraints in the past because we couldn't apply property binding to it. At least in an easy way. With 16.2, that's not a problem anymore.

```typescript
// Example showing property binding for ngComponentOutlet

@Component({
  template: `<ng-container
    *ngComponentOutlet="component; inputs: context"
  ></ng-container>`,
  standalone: true,
  imports: [NgComponentOutlet],
})
export class AppComponent {
  daylightService = inject(DaylightService);
  component = this.daylightService.isDay()
    ? WelcomeAtDayComponent
    : WelcomeAtNightComponent;
  context: Record<string, unknown> = {};

  constructor() {
    const { sunrise, sunset } = this.daylightService.getSunTimes();
   
    this.context = {
      username: inject(UserService).username,
      sunrise, sunset,
    };
  }
}
```

### `afterRender` & `afterNextRender`

`afterRender` and `afterNextRender` are not new component lifecycle hooks but application hooks.

That means they don't come in the form of Interfaces that we can implement in components. Instead, we can call them in any injectionContext. Most of the time that will be the constructor.

As application hooks, we can also run them in services. Angular registers them all globally and runs them according to how they were registered.

`afterRender` runs after every change detection. Even if there was no update to the DOM. `afterNextRender` runs once, and also after the change detection. 

We can use `afterNextRender` for third-party Javascript libraries that need access to DOM elements. `afterRender` is more interesting for library developers.

Both application hooks do not run in server-side rendering.

```typescript
// Example showing afterRender and afterNextRender

@Component({
  template: ` <img
    src="https://api.eternal-holidays.net/holiday/darmstadt.jpg"
  />`,
  standalone: true,
})
export class AppComponent {
  ngZone = inject(NgZone);
  cdCounter = 0;

  constructor() {
    // Count Change Detection Cycles
    afterRender(() => {
      console.log('CD Runs: ', ++this.cdCounter);
    });

    // Verify optimised image resolution
    afterNextRender(() => {
      this.ngZone.runOutsideAngular(() => {
        const img: HtmlImageElement = 
          document.getElementsByTagName('img')[0]

        img.addEventListener('load', () => {
          if (img.naturalWidth > img.width) {
            console.error('Image too large. Use NgOptimizedImage');
          }
        });
      });
    });
  }
}


```

### Miscellaneous

There are also new features for the Angular CLI and for Angular Material. As always, Cédric Exbrayat published a detailed blog article about all the changes, and if that's not enough, there's also the official ChangeLog.

{% embed https://blog.ninja-squad.com/2023/08/09/what-is-new-angular-16.2/ %}

[Angular 16.2 ChangeLog](https://github.com/angular/angular/releases/tag/16.2.0)

## New Minor Releases

### TypeScript 5.2

TypeScript 5.2 was released. Its main feature is the support for "Explicit Resource Management" in the form of the "using" declaration. It is similar to the using in C# or try-with-resources in Java.

Angular 16.2 still runs on TypeScript 5.1. Usually, a TypeScript update happens in a new minor or major Angular release.

{% embed https://devblogs.microsoft.com/typescript/announcing-typescript-5-2-rc/ %}

### Playwright 1.37

Other than that, Playwright had a new minor release. Version 1.37 comes with an improved UI mode. It is now easier to track the network requests. And we can also merge multiple reports together. This is a necessary feature when Playwright runs in sharded mode.

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

### NgRx 16.2

NgRx, a state management library, went up 16.2. Among bug fixes it contained small improvement in its ESLint library and the DevTools.

https://github.com/ngrx/platform/blob/main/CHANGELOG.md