EmberJS - Defining a Component

You can easily define the component in Ember.js and each component must have a dash in their name (ex: my-component). Ember.js has the power of defining the component subclasses by using an Ember.Component class.

The component can be created by using the below command −

ember generate component component-name

Example

The example given below describe how to define a component in Ember.js. Create a component with the name post-action, which will get defined under app/components/.

Open the post-action.js file and add the following code −

import Ember from 'ember';

export default Ember.Component.extend ({
   toggleBody:['Welcome to Tutorialspoint!!!']
});

Now open the component template file post-action.hbs with the following code −

{{#each toggleBody as |body|}}
   Hello...{{body}}
{{/each}}
{{yield}}

Open the index.hbs file and add the following code −

{{post-action}}
{{outlet}}

Output

Run the ember server; you will receive the following output −