Recapping ngConf 2024

In March, the Angular community gathered in Salt Lake City for the annual edition of ngConf. If you have been following along with the Angular Renaissance, then you know how exciting this ngConf was. There were amazing sessions from community members (including yours truly) as well as critical updates from the Angular Core team. With that in mind, let’s look at some of the updates and see what this means for Ionic developers using Angular.

A new output on things

Last month, I wrote about how Angular was revisiting its core set of component APIs to streamline and simplify how things work in Angular. At the center of all of this was the new Signals API, which allowed for smarter reactive data flow. With Signals, we’re able to have new APIs for input, view queries, model, and much more. But one API that is not Signal based is the new output API. 

During the opening Keynote, the Angular team wanted to be very clear that output was not a signal-based API, but rather a unification of API models and a simpler approach to creating custom events. Currently, Angular offers a @Output directive, which allows developers to create their own custom events:

@Component({...})
export class AppComponent{
  
  @Output()
  myEvent = new EventEmitter<{detail: number}>()

  someMethod(){
      this.myEvent.emit({detail: 5})
  }
}

This decorator-based API works, but can be a bit cumbersome. For Instance, it’s not enough to just attach the decorator, you still have to set the value to an EventEmitter, which can trip people up. Plus, since the team is moving towards using functions instead of decorators, this stands out as being an older API. Instead, the team is providing a simpler output function:

@Component({...})
export class AppComponent{
  
  myEvent = output<{detail: number}>();

  someMethod(){
      this.myEvent.emit({detail: 5})
  }
}

Nothing about how events work has changed, this is simply aligning on API design and removing the extra new EventEmitter that developers were forced to remember. While a small change, it’s a very welcomed one, as now all the core primitives in Angular are aligned, and we have a consistent way of setting and emitting data.

The new Wiz kid

If the name “Wiz” means nothing to you, you’re not alone. Wiz is an internal framework at Google that has been at the forefront of providing great performance and is used in mission-critical apps like Search, Meets, Play, YouTube, etc. The big news is that The Angular team and the Wiz team are collaborating and sharing their knowledge and code. While at the conference, the message seemed to be “we’re collaborating,” and on social media, Sarah Drasner (Engineering Manager for both Angular & Wiz) clarified and stated the teams will eventually merge. 

This matters because Wiz has some amazing features that come into play for server-side rendered apps. One feature that we get with this merge is something called JSAction. JSAction is a small library that allows server-side rendered apps to capture events, then when the client-side app is hydrated, it can replay all of those captured events and play it back. This isn’t something that is a far off idea, there’s already a pull request from the Wiz team to add JSAction to Angular Core. There’s more about this from a later talk “What’s cooking with SSR in Angular” from Jessica Janiuk and Doug Parker that dives into how developers would take advantage of this in the future.

Sessions Worth-a Mention

With the main keynote out of the way, we had two days of amazing sessions from our community. While tons of great content was shared, some talks that stood out to me were: 

Deferred Loading for Code of All Ages 

This talk from Lara Newsom covered a new lazy loading method in Angular templating API. This new @defer block allows developers to specify which sections of their templates should be split out into their own chunks. Meaning you can lazily load portions of your app by simply wrapping them in a @defer block and setting what should trigger the loading. Very helpful! 

Signals of Change

This was a talk from NgRx core member Marko Stanimirović about their investments in Signals. If you’ve been in the Angular community for any number of years, you’ve probably used NgRx as your state management system. Since NgRx is based on Observables, the move to Signals is something the team has been taking into consideration. Taking everything they’ve learned while maintaining the Observable-based NgRx library, they’ve created @ngrx/signals which brings about a whole new way of managing your app’s state.

Building the next meta-framework with Angular

One of the most exciting talks for me was Brandon Roberts’s talk on Analog. Analog is a meta-framework, meaning it builds on top of Angular and provides similar features to tools like Next or Nuxt. As Analog recently hit its 1.0 release, there’s a lot of opportunity to build your next app with Analog and take advantage of its server-side capabilities, and file-based routing.  

Parting Thoughts

This year’s edition of ngConf was another reason why, for me, Angular is going to continue being my framework of choice for years to come. With all the new features coming to the framework, the team has leaned heavily into making sure these improvements are not only faster than past iterations, but also easier to reason about. Add to the mix the merger of Angular and Wiz, and you have the best offerings of server-side app and client side interactions. Let’s see what Angular becomes in 2025!