EmberJS - Customizing Attributes

You can customize the attributes by binding them to a DOM element by using the attributeBindings property.

Syntax

import Ember from 'ember';

export default Ember.Component.extend ({
   tagName: 'tag_name',
   attributeBindings: ['attr_name'],
   attr_name: 'value'
});

Example

The example given below specifies customizing the attributes by binding them to a DOM element by using the attributeBindings 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: 'font',            
   attributeBindings: ['color'],           
   color: "red"
});

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

<div>Welcome to Tutorialspoint...</div>
{{yield}}

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

<h1>Hello</h1>
{{post-action}}
{{outlet}}

Output

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