Components can be used in applications in a variety of ways. In this recipe, we'll see how to create a component and add it to a template.
To begin, we'll create a simple component that displays student information.
$ ember g component student-info
All components must have a dash in their names. This will generate the student-info
component. This stub will be created in the app/components
and app/templates/components
folders as well.
student-info.js
file in the app/components
folder. Add a few simple properties:// app/components/student-info.js import Ember from 'ember'; export default Ember.Component.extend({ name: 'Erik', grade: 12, nickName: 'E' });
In this component, we added three properties, name
, grade
, and nickName
. We'll use these later in our template.
app/templates/components
folder:// app/templates/components/student-info.hbs <br>student info:<br> {{name}}<br> {{grade}}<br> {{nickName}}<br>
In this template, we are simply displaying information from the component.
application.hbs
file in the app/templates
folder:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> {{student-info}}
The component is added to the application template by adding the Handlebars expression {{student-info}}
to it. This will register an inline Handlebars helper automatically and render the contents of the student-info.hbs
file to the application.hbs
file.
Let's change this example and add the block form.
student-info.hbs
file and add yield
to it:<br>student info:<br> {{name}}<br> {{grade}}<br> {{yield}} {{nickName}}<br>
The {{yield}}
expression will be the placeholder where the outside template will render when the component is in block form. We'll discuss this more in the Using yield with components recipe.
application.hbs
file with the new block form component:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> {{#student-info}} This will render in the yield<br> {{/student-info}}
The component has a hash (#
) in front of the name. This is a signal to the Handlebars templating engine that the component will be in block form. The yield
helper in the student-info.hbs
file will display the contents in the block.
ember server
and you'll see this output:The students component is displayed here in the application template in block form.
If needed, you can defer the selection of the component until runtime. Let's take a look at an example of doing this with the student component that we created in the earlier section.
student-info
component:$ ember g component student-info
This will generate the necessary files for the student-info
component.
// app/components/student-info.js import Ember from 'ember'; export default Ember.Component.extend({ name: 'Erik', grade: 12, nickName: 'E', });
This component has a few simple properties.
// app/templates/components/student-info.hbs <br>student info:<br> {{name}}<br> {{grade}}<br> {{yield}} {{nickName}}<br> {{moreInfo}}<br>
Just as before, we are showing some simple properties that are retrieved from the component context.
app/routes
folder. Add a new model
method called comp
:// app/routes/application.js import Ember from 'ember'; export default Ember.Route.extend({ model() { return ['student-info']; } });
This model sends back a string array. This array will be used in our template as the name of the component that we want to display dynamically.
application.hbs
file in the app/templates
folder. Add a new each
helper that will display the new dynamic component:<h2 id="title">Welcome to Ember</h2> {{#each model as |comp|}} {{component comp}} {{/each}}
To display a dynamic component, you must use the {{component}}
helper. The first argument of the helper is the name of the component that you want to use. In this case, {{comp}}
is rendered to student-info
. Note that we can use the component helper inline or in block form. If the component is rendered inline, yield
is not used.
ember server
, the template will render with the dynamic component: