Nested components and angle brackets, a sneaky solution

UPDATE With the release of 3.10 you can now use :: for nesting. See bottom of the post.

If you have been following Ember development, you might have noticed that starting with Ember v3.4, you have a new way to invoke components in your templates called angle bracket syntax.

In the new syntax, instead of invoking a component like so:

{{user-profile user=user}}

You can invoke it as:

<UserProfile @user={{user}} />

The angle bracket syntax has the advantage of differentiating arguments to the component, @user, from HTML attributes. To set the class using this syntax, you would do:

<UserProfile @user={{user}} class='profile' />

This presents a problem if you have components nested inside a folder in your project, as angle bracket syntax does not support slashes (/) in the component name. Using the recently introduced let helper and the trusted component helper, however, we can do a sneaky combo and go around this limitation.

Let’s say you have a component at ui/x-button, and you want to use it.
You do the following:

{{#let (component 'ui/x-button') as |XButton|}}
  <XButton>Click me</XButton>
{{/let}}

And… That’s it!

Hope this comes in handy for one of y'all.

Actually, one more thing. Don’t forget that you can pass multiple arguments to let! You forgot to wrap ui/x-button with a ui/x-form component, let’s fix that:

{{#let (component 'ui/x-form') (component 'ui/x-button') as |XForm XButton|}}
  <XForm>
    <XButton>Click me</XButton>
  </XForm>
{{/let}}

Ember 3.10 onwards #

As mentioned in the update, with the release of Ember 3.10 came template syntax for nested folders.

You can now easily write the two nested components mentioned above as follows:

<UI::XForm>
  <UI::XButton>Click me</UI::XButton>
</UI::XForm>