Episode 24/28: Angular 18.1

#webdev #javascript #angular #frontend

Angular 18.1 is out.

Compared to the minor releases in the 17 series, it doesn't bring many new impactful features. Nevertheless, the feature everyone is talking about, which has been a little—one could say—over-hyped on Twitter, is the new let syntax.

It allows us to assign a value to a template variable. Since it doesn't open the doors to completely new features, we should see it as a syntactic improvement.

Netanel Basal has written an article covering the simplifications/patterns that the let syntax brings.

Exploring Angular’s New @let Syntax: Enhancing Template Variable Declarations | by Netanel Basal | May, 2024 | Netanel Basal

Angular’s evolution continues with exciting new features, including the recently merged @let syntax, which is now avilalabe in…

netbasal.com

Other noteworthy features of the minor release are the update to TypeScript 5.5 which comes with inferred type predicates.

@Component({
  selector: 'app-root',
  standalone: true,
  template: ``
})
export class AppComponent {
  message$: Observable<string> = inject(HttpClient).get('http://www.host.com/message').pipe(filter(value => this.isString(value)));

  isString(value: unknown) {
    return typeof value === 'string';
  }

  // before TypeScript 5.5
  isStringExplict(value: unknown): value is string {
    return typeof value === 'string';
  }
}

Uncalled functions in event listeners now throw an error. This applies to event listeners only, not for property binding in combination with Signals.

@Component({
  selector: 'app-root',
  standalone: true,
  // click get a warning
  template: `<button (click)="sayHi")>Say hi</button>`
})
export class AppComponent {
  sayHi() {
    console.log('hi');
  }
}

Finally, the routerLink directive accepts now also an UrlTree.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLinkWithHref],
  template: `<a [routerLink]="adminLink">Admin</a>`
})
export class AppComponent {
  adminLink = inject(Router).createUrlTree(['admin', {site: 'basic'}, 'main'])
}

For more information, head to the official ChangeLog, the recording of the Q&A session, the blog posting for the let syntax, and, of course, all the various articles, etc. from the community.