The Ember components allow us to convert markup text and styles into reusable blocks of code. Apart from the reusability perspective, components also help us organize our code. Components can also be reused across different applications.
We can build our own components as well as use the built-in components provided by Ember. Out of the box, Ember provides two built-in components that can be used for form building:
Input componentTextarea componentNote: Built-in components are similar in HTML markup to their native counterparts.
Input componentThe Input component in Ember can be used to create an input field where the user can enter data.
<Inputid="your-id-goes-here"@type="type-goes-here"@value="value-of-the-Input-component-goes-here"/>
The following values or parameters are needed to be passed into the Input component:
id: This is the unique id for the HTML element.
@type: This represents what type the Input component will be e.g. text, radio, search, etc.
@value: This specifies the default value for the Input component.
Note: The piece code provided in the below widget is not the complete application’s code. Only necessary files are shown.
The following code snippet illustrates how the built-in Input component in Ember can be generated.
Note: To open the application inside a new tab, click on the link provided next to the line “Your app can be found at:”.
{{page-title "Input Component"}}
<div class="text-center1">
<h1>Input component</h1>
</div>
<br>
<div class="text-center2">
<Input
id="sample-id"
@type="text"
@value=" Sample text field"
/>
</div>
{{!-- {{outlet}} --}}In the code snippet above:
Line 1: We set the page title.
Line 4: We add the heading using the h1 tag.
Lines 10-14: We add the Input component with the following properties:
id: “sample id”@type: “text”@value: “Sample text field”Textarea componentThe Textarea component in Ember can be used to define a multi-line text input control.
<Textareaid="your-id-goes-here"@value="value-of-the-Textarea-component-goes-here"rows="number-of-rows-of-Textarea-component-goes-here"cols="number-of-columns-of-Textarea-component-goes-here"/>
The following values or parameters are needed to be passed into the Textarea component:
id: This is the unique id for the HTML element.
@value: This specifies the default value for the Textarea component.
rows: This specifies the number of rows inside the Textarea component.
cols: This specifies the number of columns inside the Textarea component.
Note: The piece code provided in the below widget is not the complete application’s code. Only necessary files are shown.
The following code snippet illustrates how the built-in Textarea component in Ember can be generated.
Note: To open the application inside a new tab, click on the link provided next to the line “Your app can be found at:”.
{{page-title "Textarea Component"}}
<div class="text-center1">
<h1>Textarea component</h1>
</div>
<br>
<div class="text-center2">
<Textarea
id="sample-id"
@value=" Sample text area"
rows="6"
cols="80"
/>
</div>
{{!-- {{outlet}} --}}In the code snippet above:
Line 1: We set the page title.
Line 4: We add the heading using the h1 tag.
Lines 10-15: We add the Textarea component with the following properties:
id: “sample id”@value: “Sample text area”rows: 6cols: 80Free Resources