Nested components and angle brackets, a sneaky solution
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-butt
...