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.
In a new application, generate a new component:
$ 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 theapp/components
andapp/templates/components
folders as well.Edit the
student-info.js
file in theapp/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
, andnickName
. We'll use these later in our template.Update the component template in the
app/templates/components
folder:// app/templates/components/student-info.hbs...