Angle Bracket Invocation for Built-In Components (3.10)

This feature gives the LinkTo, Input, and Textarea helpers a makeover in the form of three new angle-bracket components.

Summary

The next new feature in 3.10 is the angle-bracket version of Ember's three built-in helpers: {{link-to}}, {{input}} and {{textarea}}.

Link To

The curly version of {{link-to}} has two forms, inline and block:

{{link-to "Static route inline label" "static-route"}}

{{#link-to "static-route"}}
  Static route block label
{{/link-to}}

Here's how that same link looks using the new Angle Bracket <LinkTo> component:

<LinkTo @route="static-route">
  Static route label
</LinkTo>

As we learned in the previous episode, Angle Bracket components take no positional params. Instead, the Angle Bracket version of <LinkTo> exposes a route argument. It also only works in the block form – there's no inline equivalent.

What about models? {{link-to}} accepts a list of models for routes with dynamic segments:

{{#link-to "dynamic-route" "slug-1"}}
  Dynamic block label
{{/link-to}}

For routes with a single model, you can use the new @model arg

<LinkTo @route="dynamic-route" @model="slug-1">
  Dynamic block label
</LinkTo>

and for routes with multiple models, use the @models arg along with the {{array}} helper:

<LinkTo
  @route="dynamic-route.dynamic-child"
  @models={{array "slug-1" "child-slug-1"}}
>
  Dynamic block label
</LinkTo>

Input

The {{input}} helper has been a mainstay in Ember for years. Now, we have the <Input> component.

Typical use of {{input}} looks like this:

{{input value=this.name placeholder="name"}}

The <Input> component looks like this:

<Input @value={{this.name}} placeholder="name">

It exposes the @value arg for data binding, but note that the placeholder attribute is not prefixed with @. This is another example of the clarity Angle Bracket components bring to our templates.

In addition to the @value argument, <Input> also exposes @type and @checked. So a checkbox looks like this:

<Input @type="checkbox" @checked={{this.isAdmin}}>

Every other attribute you might want to set on an <input> DOM element, you can set as a normal (unprefixed) attribute on the component.

Textarea

The last new built-in component is <Textarea>. The helper version looked like this

{{textarea value=this.body placeholder="Write something"}}

and the Angle Bracket looks like this:

<Textarea @value={{this.body}} placeholder="Write something">

Pretty straightforward!

Be sure to check out the Angle Brackets codemod to help convert over your existing codebase. It works on both user-defined components, as well as the three new built-ins we just covered. It's an absolutely wonderful project!

Angle Bracket Invocation for Built-In Components (3.10)

Summary

Questions?