How do I define an input using Angle Brackets?

Question

I know how to make an input in Ember using curly braces:

{{input type="text" value=userInput}}

How do I do this using Angle Brackets component syntax?

Answer 1

<Input @type="text" @value={{@parentVal}} />
or
<Input @type="text" @value={{this.localVal}} />

are the Angle Bracket equivalent to {{input type="text" value=userInput}}.

In versions early in 3.x series, you don't need the @ or this in front of the value attribute. @ means the argument comes from the parent context, like a parent component or controller, while this. refers to a property that belongs to that component itself.

Angle brackets syntax for inputs was proposed in RFC 459 and released in version 3.10. If you are trying to convert existing hbs to Angle Brackets, check out the syntax conversion guide and check for codemods.