Ember 3.4 was shipped with angle bracket invocation for components which is a very powerful feature. You can read more about this feature in this article.

“Okay, but how can I get these cool features?” you may ask. Well, thanks to Rajasegar Chandran we don’t have to go through every single .hbs file, find components and convert them to angle bracket ones. Using ember-angle-brackets-codemod we will be able to easily convert all components with a single command.

Please be noted that this codemod is not a ember-cli official codemod, so you might be facing some issues using it.

Here’s what you need to do:

  • Install the codemod: npm install ember-angle-brackets-codemod -g
  • cd my-amazing-app
  • run npx ember-angle-brackets-codemod angle-brackets path/to/templates

Note: This command will convert all components including the built-in ones such as link-to which didn’t work for me. You can read this RFC for more details on EmberJS team’s decision about addressing some of the issues that this might bring to the table.

If you want to skip converting some components, add this file to your app:

// app/config/anglebrackets-codemod-config.json
{
  "helpers": ["my-component"], // skips converting this component
  "skipBuiltInComponents": true // skips converting built-in components
}

Then run npx ember-angle-brackets-codemod angle-brackets path/to/templates --config ./config/anglebrackets-codemod-config.json

Voila! You now have shiny angle bracket version of your components.