ember: upgrade components from curly brace to angled brackets

I’m still new to Ember and I’m working with an app that’s been around for a minute, so we have a blend of styles. With Ember 3.15 (Octane) Ember introduced angle bracket components:

{{my-component}}

Became

<MyComponent />

As someone coming from React, this felt much more natural! Naturally, I wanted to upgrade! However, what about all of those props we’re passing through to our component? How do those work? Well, it’s still a little different:

{{my-component answer=42}}

Is now:

<MyComponent @answer={{42}}>

Properties are prefixed with an @.

This is just one simple difference, but there are many others. Ember’s put together a cheat sheet to get started as well as an upgrade guide for more advanced cases. For many routine tasks like this, Ember’s provided codemods, like this one for converting curly brace syntax to angled brackets.