What are built-in components in Ember.js?
Overview
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:
InputcomponentTextareacomponent
Note: Built-in components are similar in HTML markup to their native counterparts.
Input component
The Input component in Ember can be used to create an input field where the user can enter data.
Syntax
<Inputid="your-id-goes-here"@type="type-goes-here"@value="value-of-the-Input-component-goes-here"/>
Parameters
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 theInputcomponent will be e.g.text,radio,search, etc. -
@value: This specifies the default value for theInputcomponent.
Example
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}} --}}Explanation
In the code snippet above:
-
Line 1: We set the page title.
-
Line 4: We add the heading using the
h1tag. -
Lines 10-14: We add the
Inputcomponent with the following properties:id: “sample id”@type: “text”@value: “Sample text field”
Textarea component
The Textarea component in Ember can be used to define a multi-line text input control.
Syntax
<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"/>
Parameters
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 theTextareacomponent. -
rows: This specifies the number of rows inside theTextareacomponent. -
cols: This specifies the number of columns inside theTextareacomponent.
Example
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}} --}}Explanation
In the code snippet above:
-
Line 1: We set the page title.
-
Line 4: We add the heading using the
h1tag. -
Lines 10-15: We add the
Textareacomponent with the following properties:id: “sample id”@value: “Sample text area”rows: 6cols: 80
Free Resources
