Ember.js Cookbook

Using components in an application

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.

How to do it...

To begin, we'll create a simple component that displays student information.

1. 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 the app/components and app/templates/components folders as well.

2. Edit the 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: ...