Episode 23/32: Angular 16.2

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

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.

// 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.

// 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.

What’s new in Angular 16.2? | Ninja Squad

Angular 16.2 is out!

blog.ninja-squad.com

Angular 16.2 ChangeLog

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.

Announcing TypeScript 5.2 RC - TypeScript

devblogs.microsoft.com

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.