EmberJS - Customizing a Component's Element

Customize the element by using Ember.Component subclass and set the tagName property to it.

Syntax

import Ember from 'ember';

export default Ember.Component.extend ({
   tagName: 'tag_name'
});

Example

The example given below specifies customizing a component's element by using tagName property. 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 ({
   tagName: 'h1'
});

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

Welcome to Tutorialspoint...
{{yield}}

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

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

Output

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