Get Excited for Angular 16!

Apr 6

Angular has been putting out @next releases of Angular 16 for about a week now at the time of writing. There are currently two releases, 16.0.0-next.5 and 16.0.0-next.6. I looked through the releases, and some really exciting features are coming our way.

Binding Router Information to Component Input

This is probably one of the features I’m most looking forward to. You can see a lot more detail in this pull request. So, what is this exactly? It has been described that you can bind component inputs to router information. Let’s look at a code example of what it might look like.

// main.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent {
  @Input() myRouteParam: string; // this would be passed in like localhost:4200/main?myRouteParam=hello%20world
}

If it can work like this, it would be a SERIOUS improvement over how things currently work. If you’re unaware, this is how you would currently have to get a router param.

// main.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable, map } from 'rxjs';

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss'],
})
export class MainComponent {
  myRouteParam: Observable<string>;

  constructor(private route: ActivatedRoute) {
    this.myRouteParam = this.route.queryParams.pipe(
      map((params) => params['myRouteParam'])
    );
  }
}

The current way isn’t BAD, but it’s incredibly verbose and not nearly as easy as the (hopefully) new way that has been proposed.

Required Component Inputs

That’s right, we’ve got another component input feature! This is a highly anticipated feature is being able to add required inputs. Typically when we declare an Input in a Component, we can either pass one in or not despite whether the component needs that input. With the new changes, you will be able to mark an Input as required, so you get an error if you don’t pass it in. This can save a lot of time and headaches trying to figure out some really annoying issues in your application.

Reactivity with Signals

Signals is not something new to developers but definitely will be new to Angular. If you’ve been using Angular for a while, then you’re probably familiar with RxJS, which works with Observables to react to specific events. So what is Signals? Signals come from Solid.js; if you’re familiar with React, this example will look familiar.

import { createSignal } from "solid-js";

function Counter() {
  const [title, setTitle] = createSignal('placeholder');

  setTitle('My Title');

  return <h1>{title()}</h1>;
}

So if we wanted to set a title for our component, we can see that creating a signal, updating the value, and using the value are all quite simple.

At this point, it’s a little difficult to see exactly how signals might be used. We can read a discussion on the topic by the Angular team. However, we know that the Angular team is working on integrating Signals: https://github.com/angular/angular/pull/49154.

Zone.js Opt-Out

In order to improve performance, the Angular team is finally making Zone.js optional. Zone.js is used to react to changes in the browser. However, Zone.js has added a ton of overhead and bloat to Angular applications. With the removal (well, optional removal) of Zone.js, you can choose to be reactive with RxJS or Signals. This is an excellent move by the Angular team!

Server-Side Rendering Improvements

Server-Side rendering is a great technique to help speed up the rendering of your applications and adds the ability to add SEO properties to dynamic routes. The concept called hydration allows you to reuse the HTML rendered on the server, so you don’t have to re-render the page on the client. Angular 16 will introduce hydration out of the box, which should help make your SSR applications much faster and much smoother when rendering.

To Conclude

This is not a comprehensive look at all the features that will be introduced in Angular 16. I picked out some of my favorite and most anticipated features to help make your Angular apps faster and easier to produce. I’m excited to take Angular 16 for a test drive, and I’ll give another update once Angular 16 is stable!

Sam Redmond