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-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}}
 
67
Kudos
 
67
Kudos

Now read this

Controllers are dead; Long live Controllers

There has been a concern circulating the Ember.js community about the removal of controllers. In this post I will attempt to demystify what is happening and what you need to do to be future-proof. Deprecations # Proxying # It is true... Continue →